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

export type FlexProps = {
  direction: 'row' | 'column';
  justify:
    | 'flex-start'
    | 'center'
    | 'flex-end'
    | 'space-between'
    | 'space-around';
  align: 'flex-start' | 'center' | 'flex-end' | 'stretch';
  wrap: 'wrap' | 'nowrap';
  gap: string;
  padding: string;
};

export default function FlexSection({
  direction,
  justify,
  align,
  wrap,
  gap,
  padding,
}: FlexProps) {
  return (
    <div style={{ padding }} className="container mx-auto p-4">
      <DropZone
        zone="flex-content"
        style={{
          display: 'flex',
          flexDirection: direction,
          justifyContent: justify,
          alignItems: align,
          flexWrap: wrap,
          gap,
          width: '100%',
        }}
      />
    </div>
  );
}