import React from 'react';
import { ButtonBlock } from '../../types/blocks';
import SquareButton from './SquareButton';
import styles from './ScrollableButtonsBlock.module.css';

interface ScrollableButtonsBlockProps {
  block: ButtonBlock;
  onAction?: (actionType: string, actionValue: string, blockId?: string, buttonId?: string) => void;
}

const ScrollableButtonsBlock: React.FC<ScrollableButtonsBlockProps> = ({ block, onAction }) => {
  const { buttons, style } = block;
  const { gap = 16, padding = 16, buttonSize = 150 } = style;

  return (
    <div 
      className={styles.container}
      style={{ padding }}
    >
      <div 
        className={styles.scrollArea}
        style={{ gap }}
      >
        {buttons.map(button => (
          <div 
            key={button.id}
            className={styles.buttonWrapper}
          >
            <SquareButton 
              {...button}
              size={buttonSize}
              onClick={() => {
                if (button.action && onAction) {
                  onAction(button.action.type, button.action.value, block.id, button.id);
                }
              }}
            />
          </div>
        ))}
      </div>
    </div>
  );
};

export default ScrollableButtonsBlock;
