import { Input } from '@/components/ui/input'
import { ElementDefinition } from '@/lib/element-registry'
import { Calendar } from 'lucide-react'

interface DateConfig {
  required?: boolean
  targetCells: any[]
}

export const dateDefinition: ElementDefinition<DateConfig, string> = {
  type: 'date',
  label: 'Дата',
  icon: <Calendar className="h-4 w-4" />,
  defaultConfig: {
    required: false,
    targetCells: [],
  },
  Editor: ({ config, onChange }) => (
    <div className="space-y-4">
      <div className="flex items-center space-x-2">
        <input
          type="checkbox"
          id="required"
          checked={config.required}
          onChange={(e) => onChange({ ...config, required: e.target.checked })}
        />
        <label htmlFor="required" className="text-sm font-medium">
          Обязательное поле
        </label>
      </div>
    </div>
  ),
  Preview: () => (
    <div className="space-y-3">
      <div className="text-sm font-medium text-gray-700">Предпросмотр</div>
      <div className="rounded-lg border border-gray-200 bg-white p-4">
        <Input type="date" disabled className="w-full" />
      </div>
    </div>
  ),
  Render: ({ config, value, onChange }) => (
    <Input
      type="date"
      value={value || ''}
      onChange={(e) => onChange?.(e.target.value)}
      required={config.required}
    />
  ),
}