import { Sparkles } from 'lucide-react';

import type { ClassroomTimerState } from '@/components/classroom-timer/types';

interface TimerTipsProps {
  readonly state: ClassroomTimerState;
}

export function TimerTips({ state }: TimerTipsProps) {
  if (state.tips.length === 0) {
    return null;
  }

  return (
    <div className="bg-gradient-to-r from-cyan-500/10 via-blue-500/10 to-cyan-500/5 rounded-2xl border border-cyan-500/20 p-5">
      <h3 className="font-bold text-cyan-400 text-sm mb-3 flex items-center gap-2">
        <Sparkles size={16} />
        Timer Tips for Autism-Focused Classrooms
      </h3>
      <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
        {state.tips.map((tip) => (
          <div key={tip.title} className="space-y-1">
            <h4 className="text-xs font-semibold text-white">{tip.title}</h4>
            <p className="text-xs text-slate-400">{tip.body}</p>
          </div>
        ))}
      </div>
    </div>
  );
}
