"use client";
import { motion } from "framer-motion";
import { AlertTriangle, X } from "lucide-react";

interface ErrorBannerProps {
  message: string;
  onDismiss: () => void;
}

export default function ErrorBanner({ message, onDismiss }: ErrorBannerProps) {
  return (
    <motion.div
      initial={{ opacity: 0, y: -10 }}
      animate={{ opacity: 1, y: 0 }}
      exit={{ opacity: 0, y: -10 }}
      transition={{ duration: 0.3 }}
      className="flex items-start gap-3 rounded-phi p-4 mb-6"
      style={{
        background: "rgba(240, 62, 62, 0.08)",
        border: "1px solid rgba(240, 62, 62, 0.25)",
      }}
    >
      <AlertTriangle size={16} style={{ color: "#F03E3E", flexShrink: 0, marginTop: "2px" }} />
      <p className="text-phi-sm flex-1" style={{ color: "#EEF5FF" }}>{message}</p>
      <button onClick={onDismiss} style={{ color: "#7A9ABF" }} className="hover:text-red-400 transition-colors flex-shrink-0">
        <X size={14} />
      </button>
    </motion.div>
  );
}