'use client'import React from 'react';import { AlertTriangle } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx"import { twMerge } from "tailwind-merge"import { ResponsiveContainer, ScatterChart, Scatter, XAxis, YAxis, ZAxis, Tooltip, Cell } from 'recharts';function cn(...inputs: ClassValue[]) {   return twMerge(clsx(inputs))}interface RiskData {   x: number;   y: number;   z: number;   risk: string;   color: string;   [key: string]: any;}interface RiskHeatmapCardProps {   isInteractive?: boolean;   className?: string;   title?: string;   subtitle?: string;   data?: RiskData[];}const DEFAULT_TITLE = "Risk Map";const DEFAULT_SUBTITLE = "Likelihood vs Impact";const DEFAULT_DATA: RiskData[] = [   { x: 1, y: 1, z: 10, risk: 'Low', color: '#10b981' },   // Low/Low   { x: 1, y: 2, z: 20, risk: 'Low', color: '#10b981' },   // Low/Med   { x: 1, y: 3, z: 30, risk: 'Med', color: '#f59e0b' },   // Low/High -> Med   { x: 2, y: 1, z: 20, risk: 'Low', color: '#10b981' },   // Med/Low   { x: 2, y: 2, z: 50, risk: 'Med', color: '#f59e0b' },   // Med/Med   { x: 2, y: 3, z: 80, risk: 'High', color: '#f43f5e' },  // Med/High   { x: 3, y: 1, z: 30, risk: 'Med', color: '#f59e0b' },   // High/Low   { x: 3, y: 2, z: 80, risk: 'High', color: '#f43f5e' },  // High/Med   { x: 3, y: 3, z: 100, risk: 'Crit', color: '#be123c' }, // High/High];export const RiskHeatmapCard: React.FC<RiskHeatmapCardProps> = ({   isInteractive = true,   className = "",   title = DEFAULT_TITLE,   subtitle = DEFAULT_SUBTITLE,   data = DEFAULT_DATA,}) => {   const index = 43;   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-xs text-muted-foreground">{subtitle}</span>               </div>            </div>            <div className="rounded-lg bg-emerald-500/10 p-2 text-emerald-500">               <AlertTriangle className="h-5 w-5" />            </div>         </div>         <div className="relative z-10 flex-1 min-h-[140px]">            <div className="absolute inset-0 -ml-4 -mb-4">               <ResponsiveContainer width="100%" height="100%">                  <ScatterChart margin={{ top: 10, right: 10, bottom: 10, left: 10 }}>                     <XAxis type="number" dataKey="x" name="Likelihood" domain={[0, 4]} hide />                     <YAxis type="number" dataKey="y" name="Impact" domain={[0, 4]} hide />                     <ZAxis type="number" dataKey="z" range={[50, 400]} />                     <Tooltip cursor={{ strokeDasharray: '3 3' }} contentStyle={{ borderRadius: '8px', border: 'none', backgroundColor: 'var(--tooltip-bg)', color: 'var(--tooltip-text)', fontSize: '10px' }} />                     <Scatter data={data} shape="circle">                        {data.map((entry, index) => (                           <Cell key={`cell-${index}`} fill={entry.color} />                        ))}                     </Scatter>                  </ScatterChart>               </ResponsiveContainer>            </div>            {/* Labels overlay */}            <div className="absolute bottom-2 left-6 text-[10px] text-muted-foreground">Likelihood</div>            <div className="absolute left-2 bottom-6 text-[10px] text-muted-foreground -rotate-90 origin-left">Impact</div>         </div>      </motion.div>   );};