"use client"

import { emergencyNotification } from "@/data";
import { AlertCircle } from "lucide-react";
import Marquee from "react-fast-marquee";

export function MarqueeNotification() {
  if (!emergencyNotification.active) return null;

  return (
    <div className="bg-destructive text-destructive-foreground py-2 relative z-40">
      <div className="flex items-center gap-2">
        <div className="px-4 flex items-center gap-2 bg-destructive z-10 font-bold shrink-0">
            <AlertCircle className="h-4 w-4" />
            <span>NOTICE:</span>
        </div>
        <Marquee gradient={false} speed={50} className="flex-1">
            <span className="mx-4">{emergencyNotification.message}</span>
            <span className="mx-4"> • </span>
            <span className="mx-4">{emergencyNotification.message}</span>
            <span className="mx-4"> • </span>
            <span className="mx-4">{emergencyNotification.message}</span>
        </Marquee>
      </div>
    </div>
  );
}
