'use client'import React from 'react';import { Zap, TrendingUp, DollarSign } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx"import { twMerge } from "tailwind-merge"import { ResponsiveContainer, RadialBarChart, RadialBar, PolarAngleAxis } from 'recharts';function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs))}interface QuickRatioData {  name: string;  value: number;  fill: string;  [key: string]: any;}interface QuickRatioCardProps {  isInteractive?: boolean;  className?: string;  title?: string;  ratio?: string;  ratioStatus?: string;  acidTestLabel?: string;  acidTestStatus?: string;  liquidAssetsLabel?: string;  liquidAssetsValue?: string;  currentLiabLabel?: string;  currentLiabValue?: string;  data?: QuickRatioData[];}const DEFAULT_TITLE = "Quick Ratio";const DEFAULT_RATIO = "1.12";const DEFAULT_RATIO_STATUS = "Liquid";const DEFAULT_ACID_TEST_LABEL = "Acid Test";const DEFAULT_ACID_TEST_STATUS = "Pass";const DEFAULT_LIQUID_ASSETS_LABEL = "Liquid Assets";const DEFAULT_LIQUID_ASSETS_VALUE = "$450k";const DEFAULT_CURRENT_LIAB_LABEL = "Current Liab.";const DEFAULT_CURRENT_LIAB_VALUE = "$402k";const DEFAULT_DATA: QuickRatioData[] = [{ name: 'Ratio', value: 1.12, fill: '#10b981' }]; // Emerald 500export const QuickRatioCard: React.FC<QuickRatioCardProps> = ({  isInteractive = true,  className = "",  title = DEFAULT_TITLE,  ratio = DEFAULT_RATIO,  ratioStatus = DEFAULT_RATIO_STATUS,  acidTestLabel = DEFAULT_ACID_TEST_LABEL,  acidTestStatus = DEFAULT_ACID_TEST_STATUS,  liquidAssetsLabel = DEFAULT_LIQUID_ASSETS_LABEL,  liquidAssetsValue = DEFAULT_LIQUID_ASSETS_VALUE,  currentLiabLabel = DEFAULT_CURRENT_LIAB_LABEL,  currentLiabValue = DEFAULT_CURRENT_LIAB_VALUE,  data = DEFAULT_DATA,}) => {  const index = 36;  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">{ratio}</span>            <span className="text-xs bg-emerald-500/10 text-emerald-600 px-1.5 py-0.5 rounded-full flex items-center gap-0.5">              <TrendingUp className="w-3 h-3" /> {ratioStatus}            </span>          </div>        </div>        <div className="rounded-lg bg-emerald-500/10 p-2 text-emerald-500">          <Zap className="h-5 w-5" />        </div>      </div>      <div className="relative z-10 flex-1 flex items-center gap-4">        {/* Chart Zone */}        <div className="h-28 w-28 relative flex-shrink-0">          <ResponsiveContainer width="100%" height="100%">            <RadialBarChart              cx="50%"              cy="50%"              innerRadius="60%"              outerRadius="90%"              barSize={8}              data={data}              startAngle={180}              endAngle={0}            >              <PolarAngleAxis                type="number"                domain={[0, 2]}                angleAxisId={0}                tick={false}              />              <RadialBar                background={{ fill: 'var(--chart-bg, #f4f4f5)' }}                dataKey="value"                cornerRadius={10}              />            </RadialBarChart>          </ResponsiveContainer>          <div className="absolute inset-0 flex flex-col items-center justify-center pointer-events-none pb-4">            <span className="text-[10px] text-muted-foreground">{acidTestLabel}</span>            <span className="text-sm font-bold text-foreground">{acidTestStatus}</span>          </div>        </div>        {/* Context Stats Zone */}        <div className="flex flex-col gap-3 min-w-[100px]">          <div>            <span className="block text-[10px] text-muted-foreground uppercase tracking-wide">{liquidAssetsLabel}</span>            <span className="block text-sm font-bold text-foreground">{liquidAssetsValue}</span>          </div>          <div>            <span className="block text-[10px] text-muted-foreground uppercase tracking-wide">{currentLiabLabel}</span>            <span className="block text-sm font-bold text-foreground">{currentLiabValue}</span>          </div>        </div>      </div>      <div className="absolute -bottom-4 -right-4 z-0 opacity-[0.03] pointer-events-none">        <Zap className="w-24 h-24 text-foreground" />      </div>    </motion.div>  );};