import { AlertTriangle, CheckCircle } from 'lucide-react';

interface SafetyQuizRemindersPanelProps {
  readonly reminders: readonly string[];
}

export function SafetyQuizRemindersPanel({ reminders }: SafetyQuizRemindersPanelProps) {
  return (
    <div className="bg-slate-800/40 backdrop-blur-sm rounded-2xl border border-slate-700/40 p-5">
      <h3 className="font-semibold text-white mb-3 flex items-center gap-2">
        <AlertTriangle size={16} className="text-amber-400" />
        Key Reminders
      </h3>
      <div className="space-y-2.5">
        {reminders.map((tip) => (
          <div key={tip} className="flex items-start gap-2">
            <CheckCircle size={14} className="text-emerald-400 mt-0.5 flex-shrink-0" />
            <p className="text-xs text-slate-300">{tip}</p>
          </div>
        ))}
      </div>
    </div>
  );
}
