import { Textarea } from '@/components/ui/textarea';
import type { FrameSectionLabel } from '@/shared/constants/frame';

interface FrameSectionFieldProps {
  readonly section: FrameSectionLabel;
  readonly value: string;
  readonly onChange: (value: string) => void;
}

export function FrameSectionField({ section, value, onChange }: FrameSectionFieldProps) {
  return (
    <div>
      <label className="text-sm font-medium text-slate-300 flex items-center gap-2">
        <span className={`w-6 h-6 bg-gradient-to-br ${section.color} rounded-lg text-white text-xs font-bold flex items-center justify-center`}>
          {section.letter}
        </span>
        {section.label}
      </label>
      <Textarea
        value={value}
        onChange={(event) => onChange(event.target.value)}
        placeholder={section.description}
        rows={2}
        className="w-full mt-1 px-4 py-2.5 bg-slate-700/50 border border-slate-600/50 rounded-xl text-sm text-white placeholder-slate-500 focus:ring-2 focus:ring-violet-500 outline-none resize-none"
      />
    </div>
  );
}
