import { AlertTriangle, Car, Heart, Shield } from "lucide-react";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";

interface NightWalkRemindersProps {
  reminders: string[];
  tips: string;
}

export function NightWalkReminders({ reminders, tips }: NightWalkRemindersProps) {
  const icons = [Shield, Car, Heart, AlertTriangle];

  return (
    <section className="space-y-6">
      <h2 className="text-xl font-bold text-primary">NightWalk 提醒</h2>

      <div className="rounded-xl border border-primary/20 bg-primary/5 p-5">
        <h3 className="mb-2 font-semibold">老司機私房建議</h3>
        <p className="leading-relaxed text-muted-foreground">{tips}</p>
      </div>

      <div className="grid gap-4 sm:grid-cols-2">
        {reminders.map((reminder, i) => {
          const Icon = icons[i % icons.length];
          return (
            <Alert
              key={i}
              className="border-border bg-card"
            >
              <Icon className="size-4 text-primary" />
              <AlertTitle className="text-sm">安全提醒 {i + 1}</AlertTitle>
              <AlertDescription className="text-muted-foreground">
                {reminder}
              </AlertDescription>
            </Alert>
          );
        })}
      </div>
    </section>
  );
}