'use client';
import { ComponentStyler } from '@/components/builder/common/ComponentStyler';
import { Label } from '@/components/ui/label';
import { Separator } from '@/components/ui/separator';
import { PortfolioElement } from '@/src/types/portfolio';
import { EditFormProps } from '@/types/common';
import { ASPECT_RATIO_OPTIONS } from '@/utils/image';
import { SearchableSelect } from '../../ui/searchable-select';

export function ImageEditForm({ props, onPropChange }: EditFormProps) {
  return (
    <div className='space-y-6'>
      <div className='space-y-4'>
        <div className='space-y-2 z-[450]'>
          <Label>Aspect Ratio</Label>
          <SearchableSelect
            options={ASPECT_RATIO_OPTIONS}
            value={props.aspectRatio as string}
            onChange={(value) => onPropChange('aspectRatio', value as string)}
            isClearable
          />
        </div>
      </div>

      <Separator className='bg-neutral-700' />

      <div className='space-y-2'>
        <h3 className='text-sm font-medium'>Spacing</h3>
        <ComponentStyler
          styling={props.styling as PortfolioElement['styling']}
          onStylingChange={(styling) => onPropChange('styling', styling)}
          enabledOptions={{
            alignment: true,
            padding: true,
            textColor: false,
            backgroundColor: false,
            width: { min: 100, max: 1500, defaultValue: 500 },
          }}
        />
      </div>
    </div>
  );
}
