import { Shield } from 'lucide-react';

import { Button } from '@/components/ui/button';
import type { SafetyQuiz } from '@/shared/types/app';

interface SafetyQuizIntroPanelProps {
  readonly quiz: SafetyQuiz;
  readonly weekOf: string;
  readonly onStart: () => void;
}

export function SafetyQuizIntroPanel({
  quiz,
  weekOf,
  onStart,
}: SafetyQuizIntroPanelProps) {
  return (
    <div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-6 text-center">
      <div className="w-20 h-20 rounded-2xl bg-gradient-to-br from-blue-500 to-indigo-600 flex items-center justify-center mx-auto mb-4 shadow-xl shadow-blue-500/20">
        <Shield size={36} className="text-white" />
      </div>
      <h3 className="text-xl font-bold text-white mb-2">{quiz.title}</h3>
      <p className="text-sm text-slate-400 mb-1">Week of {weekOf}</p>
      <p className="text-sm text-slate-500 mb-6">
        {quiz.questions.length} scenario-based questions · Results saved to backend
      </p>
      <Button
        type="button"
        onClick={onStart}
        className="px-6 py-3 bg-gradient-to-r from-blue-500 to-indigo-600 text-white rounded-xl font-semibold hover:shadow-lg hover:shadow-blue-500/25 transition-all"
      >
        Start Weekly Quiz
      </Button>
    </div>
  );
}
