'use client'import React from 'react';import { Scale, Info } 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 DebtEquityData {    name: string;    value: number;    fill: string;}interface DebtEquityCardProps {    isInteractive?: boolean;    className?: string;    title?: string;    ratio?: string;    statusLabel?: string;    leverage?: string;    industryAvg?: string;    data?: DebtEquityData[];}const DEFAULT_TITLE = "Debt-to-Equity";const DEFAULT_RATIO = "1.2x";const DEFAULT_STATUS_LABEL = "Moderate";const DEFAULT_LEVERAGE = "1.2x";const DEFAULT_INDUSTRY_AVG = "1.5x";const DEFAULT_DATA: DebtEquityData[] = [{ name: 'Ratio', value: 1.2, fill: '#f59e0b' }];export const DebtEquityCard: React.FC<DebtEquityCardProps> = ({    isInteractive = true,    className = "",    title = DEFAULT_TITLE,    ratio = DEFAULT_RATIO,    statusLabel = DEFAULT_STATUS_LABEL,    leverage = DEFAULT_LEVERAGE,    industryAvg = DEFAULT_INDUSTRY_AVG,    data = DEFAULT_DATA,}) => {    const index = 18;    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-amber-500/10 text-amber-600 px-1.5 py-0.5 rounded-full flex items-center gap-0.5">                            {statusLabel}                        </span>                    </div>                </div>                <div className="rounded-lg bg-emerald-500/10 p-2 text-emerald-500">                    <Scale className="h-5 w-5" />                </div>            </div>            <div className="relative z-10 flex-1 min-h-[140px] flex items-center justify-center">                <div className="h-[140px] w-full relative">                    <ResponsiveContainer width="100%" height="100%">                        <RadialBarChart                            cx="50%"                            cy="50%"                            innerRadius="60%"                            outerRadius="90%"                            barSize={12}                            data={data}                            startAngle={180}                            endAngle={0}                        >                            <PolarAngleAxis                                type="number"                                domain={[0, 3]}                                angleAxisId={0}                                tick={false}                            />                            <RadialBar                                background={{ fill: '#f4f4f5' }} // zinc-100                                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-xs text-muted-foreground">Leverage</span>                        <span className="font-bold text-foreground">{leverage}</span>                    </div>                </div>            </div>            <div className="z-10 mt-2 flex items-center justify-between text-xs pt-2 border-t border-border">                <span className="flex items-center gap-1 text-muted-foreground"><Info className="h-3 w-3" /> Industry Avg</span>                <span className="font-bold text-foreground">{industryAvg}</span>            </div>        </motion.div>    );};