'use client';
import { ComponentStyler } from '@/components/builder/common/ComponentStyler';
import { Input } from '@/components/ui/input';
import { Label } from '@/components/ui/label';
import { Switch } from '@/components/ui/switch';
import { PortfolioElement } from '@/src/types/portfolio';
import { EditFormProps } from '@/types/common';
import { SearchableSelect } from '@/components/ui/searchable-select';
import { IconPicker } from '@/components/ui/icon-picker';

export function ButtonEditForm({ props, onPropChange }: EditFormProps) {
  return (
    <div className='space-y-4'>
      <div className='space-y-2'>
        <Label>Text</Label>
        <Input
          value={props.text as string}
          onChange={(e) => onPropChange('text', e.target.value)}
          placeholder='Button'
        />
      </div>

      <div className='space-y-2'>
        <Label>URL</Label>
        <Input
          value={(props.href as string) || ''}
          onChange={(e) => onPropChange('href', e.target.value)}
          placeholder='https://example.com'
        />
      </div>

      <div className='space-y-2'>
        <Label>Variant</Label>
        <SearchableSelect
          options={[
            { label: 'Solid', value: 'solid' },
            { label: 'Outline', value: 'outline' },
            { label: 'Ghost', value: 'ghost' },
            { label: 'Link', value: 'link' },
          ]}
          value={(props.variant as string) || 'solid'}
          onChange={(value) => onPropChange('variant', value as string)}
        />
      </div>

      <div className='space-y-2'>
        <Label>Icon</Label>
        <IconPicker value={(props.icon as string) || ''} onChange={(value) => onPropChange('icon', value || '')} />
      </div>

      <div className='space-y-2'>
        <Label>Icon Position</Label>
        <SearchableSelect
          options={[
            { label: 'Left', value: 'left' },
            { label: 'Right', value: 'right' },
          ]}
          value={(props.iconPosition as string) || 'left'}
          onChange={(value) => onPropChange('iconPosition', value as string)}
          isClearable
        />
      </div>

      <div className='flex items-center justify-between'>
        <Label>Open in new tab</Label>
        <Switch
          checked={props.openInNewTab as boolean}
          onCheckedChange={(checked) => onPropChange('openInNewTab', checked)}
        />
      </div>

      <ComponentStyler
        styling={props.styling as PortfolioElement['styling']}
        onStylingChange={(styling) => onPropChange('styling', styling)}
        enabledOptions={{
          backgroundColor: true,
          color: true,
          alignment: true,
          padding: true,
        }}
      />
    </div>
  );
}
