'use client'import React from 'react';import { Siren, ShieldAlert } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx"import { twMerge } from "tailwind-merge"import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip } from 'recharts';function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs))}interface AlertData {  name: string;  value: number;  color: string;  [key: string]: any;}interface FraudAlertsCardProps {  isInteractive?: boolean;  className?: string;  title?: string;  alertCount?: string;  alertLabel?: string;  alertDetailsTitle?: string;  alertDetailsLocation?: string;  data?: AlertData[];}const DEFAULT_TITLE = "Security Alerts";const DEFAULT_ALERT_COUNT = "3";const DEFAULT_ALERT_LABEL = "High Risk";const DEFAULT_ALERT_DETAILS_TITLE = "Suspicious Login";const DEFAULT_ALERT_DETAILS_LOCATION = "Lagos, NG • IP Blocked";const DEFAULT_DATA: AlertData[] = [  { name: 'Phishing', value: 45, color: '#f43f5e' }, // Rose  { name: 'Login', value: 30, color: '#f59e0b' },   // Amber  { name: 'Card', value: 25, color: '#3b82f6' },    // Blue];export const FraudAlertsCard: React.FC<FraudAlertsCardProps> = ({  isInteractive = true,  className = "",  title = DEFAULT_TITLE,  alertCount = DEFAULT_ALERT_COUNT,  alertLabel = DEFAULT_ALERT_LABEL,  alertDetailsTitle = DEFAULT_ALERT_DETAILS_TITLE,  alertDetailsLocation = DEFAULT_ALERT_DETAILS_LOCATION,  data = DEFAULT_DATA,}) => {  const index = 44;  return (    <motion.div      layoutId={isInteractive ? `card-${index}-${title}` : undefined}      transition={{ duration: 0.4, ease: "easeOut" }}      className={cn(        "relative overflow-hidden rounded-xl border border-border bg-card text-card-foreground p-5 shadow-sm transition-all flex flex-col h-full group",        isInteractive ? "cursor-pointer hover:border-primary/50 hover:shadow-md" : "",        className      )}    >      <div className="mb-2 flex items-start justify-between relative z-10">        <div>          <h3 className="font-semibold text-lg text-foreground">            {title}          </h3>          <div className="flex items-center gap-2 mt-1">            <span className="text-2xl font-bold text-foreground">{alertCount}</span>            <span className="text-xs px-2 py-0.5 rounded-full bg-rose-100 dark:bg-rose-900/30 text-rose-500 font-medium border border-rose-200 dark:border-rose-800">{alertLabel}</span>          </div>        </div>        <div className="h-14 w-14">          <ResponsiveContainer width="100%" height="100%">            <PieChart>              <Pie data={data} dataKey="value" innerRadius={15} outerRadius={25} stroke="none">                {data.map((entry, index) => (                  <Cell key={`cell-${index}`} fill={entry.color} />                ))}              </Pie>              <Tooltip contentStyle={{ borderRadius: '8px', border: 'none', backgroundColor: 'var(--tooltip-bg)', color: 'var(--tooltip-text)', fontSize: '10px' }} />            </PieChart>          </ResponsiveContainer>        </div>      </div>      <div className="relative z-10 flex-1">        <div className="flex flex-col gap-2 mt-1">          <div className="p-2.5 bg-rose-50 dark:bg-rose-900/10 border border-rose-100 dark:border-rose-900/20 rounded-lg flex gap-3 items-start group-hover:bg-rose-100/50 dark:group-hover:bg-rose-900/20 transition-colors">            <ShieldAlert className="w-4 h-4 text-rose-500 mt-0.5 shrink-0" />            <div>              <p className="text-xs font-bold text-foreground">{alertDetailsTitle}</p>              <p className="text-[10px] text-muted-foreground mt-0.5">{alertDetailsLocation}</p>            </div>          </div>          <div className="grid grid-cols-2 gap-2 mt-1">            {data.slice(0, 2).map((item) => (              <div key={item.name} className="flex items-center justify-between text-[10px] px-2 py-1 bg-muted rounded">                <span className="text-muted-foreground">{item.name}</span>                <span className="font-medium" style={{ color: item.color }}>{item.value}%</span>              </div>            ))}          </div>        </div>      </div>    </motion.div>  );};