import { CheckCircle } from 'lucide-react';

import { WALKTHROUGH_FORM_CATEGORIES } from '@/shared/constants/walkthrough';
import { WalkthroughCategoryScoreCard } from '@/components/walkthrough-form/WalkthroughCategoryScoreCard';
import type { WalkthroughFormViewProps } from '@/components/walkthrough-form/types';

export function WalkthroughEvaluationSection({ state, actions, submitting }: 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-lg font-semibold text-white mb-1 flex items-center gap-2">
        <div className="w-7 h-7 rounded-lg bg-violet-500/20 flex items-center justify-center">
          <CheckCircle size={16} className="text-violet-400" />
        </div>
        Step 2: Walk-Through Evaluation
      </h3>
      <p className="text-xs text-slate-500 mb-5 ml-9">Rate each category using the dropdown. Add optional comments for context.</p>

      <div className="space-y-4">
        {WALKTHROUGH_FORM_CATEGORIES.map((category) => (
          <WalkthroughCategoryScoreCard
            key={category.key}
            category={category}
            state={state}
            actions={actions}
            submitting={submitting}
          />
        ))}
      </div>
    </div>
  );
}
