'use client'import React from 'react';import { Leaf } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx"import { twMerge } from "tailwind-merge"import { ResponsiveContainer, RadarChart, Radar, PolarGrid, PolarAngleAxis, Tooltip } from 'recharts';function cn(...inputs: ClassValue[]) {   return twMerge(clsx(inputs))}interface EsgData {   subject: string;   A: number;   fullMark: number;}interface EsgScoreCardProps {   isInteractive?: boolean;   className?: string;   title?: string;   score?: string;   rankLabel?: string;   data?: EsgData[];}const DEFAULT_TITLE = "ESG Score";const DEFAULT_SCORE = "A-";const DEFAULT_RANK_LABEL = "Top 10%";const DEFAULT_DATA: EsgData[] = [   { subject: 'Env', A: 92, fullMark: 100 },   { subject: 'Soc', A: 85, fullMark: 100 },   { subject: 'Gov', A: 88, fullMark: 100 },];export const EsgScoreCard: React.FC<EsgScoreCardProps> = ({   isInteractive = true,   className = "",   title = DEFAULT_TITLE,   score = DEFAULT_SCORE,   rankLabel = DEFAULT_RANK_LABEL,   data = DEFAULT_DATA,}) => {   const index = 49;   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">{score}</span>                  <span className="text-xs text-muted-foreground">{rankLabel}</span>               </div>            </div>            <div className="rounded-lg bg-emerald-500/10 p-2 text-emerald-500">               <Leaf className="h-5 w-5" />            </div>         </div>         <div className="relative z-10 flex-1 min-h-[140px]">            <ResponsiveContainer width="100%" height="100%">               <RadarChart cx="50%" cy="50%" outerRadius="70%" data={data}>                  <PolarGrid stroke="#e4e4e7" />                  <PolarAngleAxis dataKey="subject" tick={{ fill: '#71717a', fontSize: 10, fontWeight: 600 }} />                  <Radar name="Score" dataKey="A" stroke="#10b981" fill="#10b981" fillOpacity={0.6} />                  <Tooltip cursor={{ stroke: '#10b981', strokeWidth: 1 }} contentStyle={{ borderRadius: '8px', border: 'none', backgroundColor: 'var(--tooltip-bg)', color: 'var(--tooltip-text)' }} />               </RadarChart>            </ResponsiveContainer>         </div>      </motion.div>   );};