import { DropZone } from '@puckeditor/core';

export type ColumnsProps = {
  numColumns: 2 | 3 | 4;
  gap: string;
  padding: string;
  verticalAlign: 'start' | 'center' | 'end';
};

const verticalAlignClass = {
  start: 'items-start',
  center: 'items-center',
  end: 'items-end',
};

export default function ColumnsSection({
  numColumns,
  gap,
  padding,
  verticalAlign,
}: ColumnsProps) {
  return (
    <div style={{ padding }}>
      <div
        className={`grid ${verticalAlignClass[verticalAlign]}`}
        style={{ gridTemplateColumns: `repeat(${numColumns}, 1fr)`, gap }}
      >
        {Array.from({ length: numColumns }).map((_, i) => (
          <DropZone key={i} zone={`column-${i}`} />
        ))}
      </div>
    </div>
  );
}