'use client'

export interface MediaFieldProps {
  label: string
  value?: { id: string; filename: string; url: string } | null
  onChange: (value: any) => void
  required?: boolean
  helpText?: string
}

export function MediaField({ label, value, onChange, required, helpText }: MediaFieldProps) {
  return (
    <div>
      <label className="mb-1 block text-sm font-medium">
        {label}
        {required && <span className="ml-0.5 text-[var(--destructive)]">*</span>}
      </label>

      {value ? (
        <div className="flex items-center gap-3 rounded-md border border-[var(--border)] p-3">
          <div className="h-16 w-16 shrink-0 rounded-md bg-[var(--muted)]" />
          <div className="flex-1">
            <p className="text-sm font-medium">{value.filename}</p>
            <button
              type="button"
              onClick={() => onChange(null)}
              className="mt-1 text-xs text-[var(--destructive)] hover:underline"
            >
              Remove
            </button>
          </div>
        </div>
      ) : (
        <button
          type="button"
          onClick={() => onChange({ id: 'mock', filename: 'placeholder.jpg', url: '' })}
          className="flex w-full items-center justify-center rounded-md border-2 border-dashed border-[var(--border)] p-6 text-sm text-[var(--muted-foreground)] hover:border-[var(--primary)] hover:text-[var(--foreground)]"
        >
          <span>Click to select media</span>
        </button>
      )}

      {helpText && <p className="mt-1 text-xs text-[var(--muted-foreground)]">{helpText}</p>}
    </div>
  )
}
