import { Textarea } from '@/components/ui/textarea';
import type { WalkthroughFormViewProps } from '@/components/walkthrough-form/types';

export function WalkthroughGoalFields({ state, actions }: WalkthroughFormViewProps) {
  if (!state.teacherNameTrimmed || !state.classroomTrimmed) {
    return null;
  }

  return (
    <div className="bg-slate-800/50 rounded-2xl border border-slate-700/50 p-5">
      <h3 className="text-sm font-semibold text-white mb-3">Overall Notes (Optional)</h3>
      <Textarea
        value={state.overallNotes}
        onChange={(event) => actions.setOverallNotes(event.target.value)}
        placeholder="Any additional observations, concerns, or recognitions..."
        rows={3}
        className="w-full px-4 py-3 bg-slate-900/50 border border-slate-700/30 rounded-xl text-sm text-slate-300 placeholder-slate-600 focus:outline-none focus:border-indigo-500/40 resize-none"
      />
    </div>
  );
}
