import { CheckCircle } from 'lucide-react';

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

export function WalkthroughSubmittedState({ state, actions }: WalkthroughFormViewProps) {
  return (
    <div className="flex flex-col items-center justify-center py-16">
      <div className="w-20 h-20 rounded-full bg-emerald-500/20 border-2 border-emerald-500/40 flex items-center justify-center mb-6">
        <CheckCircle size={40} className="text-emerald-400" />
      </div>
      <h3 className="text-2xl font-bold text-white mb-2">Walk-Through Submitted</h3>
      <p className="text-slate-400 text-sm mb-1">
        {state.teacherNameTrimmed} - {state.classroomTrimmed}
      </p>
      <p className="text-slate-500 text-xs mb-6">{state.date} at {state.time}</p>
      <Button
        type="button"
        onClick={actions.reset}
        className="px-6 py-2.5 bg-gradient-to-r from-indigo-500 to-violet-500 text-white font-semibold rounded-xl hover:from-indigo-600 hover:to-violet-600 transition-all shadow-lg shadow-indigo-500/25"
      >
        Start New Walk-Through
      </Button>
    </div>
  );
}
