/**
 * Dining Staff Dashboard
 * Landing page after dining@school.com login.
 */

import { Link } from 'react-router-dom';
import {
  UtensilsCrossed, HeartPulse, Bell, Mail
} from 'lucide-react';

export default function DiningDashboard() {
  const cards = [
    { path: '/dining-hall', label: 'Dining Hall Alerts', hint: 'Per-student allergens + diet roster for the kitchen tablet', icon: UtensilsCrossed, color: 'amber' },
    { path: '/notice-board', label: 'Notice Board', hint: 'Today\'s announcements', icon: Bell, color: 'blue' },
    { path: '/messages', label: 'Messages', hint: 'Talk to the nurse', icon: Mail, color: 'emerald' },
  ];

  return (
    <div className="space-y-8 animate-in fade-in duration-700 pb-10">
      <div className="flex items-center justify-between">
        <div>
          <h1 className="text-3xl font-black text-text tracking-tight uppercase">Dining Hall</h1>
          <nav className="flex text-[0.65rem] font-black uppercase tracking-[2px] text-text-muted gap-2 items-center mt-1">
            <span>Kitchen Tablet</span>
          </nav>
        </div>
        <div className="flex items-center gap-2 px-4 py-2 bg-amber-50 border border-amber-200 rounded-2xl text-amber-700 text-xs font-black uppercase tracking-widest">
          <UtensilsCrossed size={16} /> Dining Staff
        </div>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {cards.map((card) => (
          <Link key={card.path} to={card.path}
            className="bg-card border border-border rounded-2xl p-5 hover:shadow-md transition-all group">
            <div className={`w-12 h-12 rounded-xl flex items-center justify-center mb-3 bg-${card.color}-50 text-${card.color}-600 border border-${card.color}-100 group-hover:scale-110 transition-transform`}>
              <card.icon size={22} />
            </div>
            <p className="text-lg font-black text-text">{card.label}</p>
            <p className="text-xs text-text-muted mt-1">{card.hint}</p>
          </Link>
        ))}
      </div>

      <div className="bg-amber-50 border border-amber-200 rounded-2xl p-5 text-amber-700 text-xs">
        <p className="font-black uppercase tracking-widest flex items-center gap-2 mb-1">
          <HeartPulse size={14} /> Patient safety
        </p>
        Always check the <b>Dining Hall Alerts</b> page before service. Severe allergies and EpiPen locations are highlighted in red.
      </div>
    </div>
  );
}
