type CategoryFormProps = {
  label: string;
  placeholder: string;
  helper?: string;
  value: string;
  onChange: (value: string) => void;
};

export default function CategoryForm({
  label,
  placeholder,
  helper,
  value,
  onChange
}: CategoryFormProps) {
  return (
    <div className="rounded-3xl border border-slate-200/80 bg-white/90 p-6 shadow-[0_24px_60px_-40px_rgba(15,23,42,0.6)]">
      <label className="flex flex-col gap-3">
        <span className="text-sm font-semibold uppercase tracking-[0.2em] text-slate-500">
          {label}
        </span>
        <textarea
          className="min-h-[160px] w-full resize-y rounded-2xl border border-slate-200/80 bg-white px-4 py-3 text-base text-slate-900 shadow-inner focus:border-slate-900 focus:outline-none focus:ring-2 focus:ring-slate-400/40"
          placeholder={placeholder}
          value={value}
          onChange={(event) => onChange(event.target.value)}
        />
      </label>
      {helper ? (
        <p className="mt-3 text-sm text-slate-500">{helper}</p>
      ) : null}
    </div>
  );
}