'use client'import React from 'react';import { TrendingUp, Info } from 'lucide-react';import { ResponsiveContainer, LineChart, Line, XAxis, YAxis, Tooltip, CartesianGrid, ReferenceLine } from 'recharts';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx"import { twMerge } from "tailwind-merge"function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs))}interface YieldData {  name: string;  val: number;  [key: string]: any;}interface TreasuryYieldCardProps {  isInteractive?: boolean;  className?: string;  title?: string;  subtitle?: string;  data?: YieldData[];  invertedLabel?: string;  inverted?: boolean;}const DEFAULT_TITLE = "Yield Curve";const DEFAULT_SUBTITLE = "US Treasury";const DEFAULT_DATA: YieldData[] = [  { name: '1M', val: 5.2 },  { name: '6M', val: 5.4 },  { name: '1Y', val: 5.1 },  { name: '5Y', val: 4.2 },  { name: '10Y', val: 3.9 },  { name: '30Y', val: 4.0 },];const DEFAULT_INVERTED_LABEL = "Inverted";export const TreasuryYieldCard: React.FC<TreasuryYieldCardProps> = ({  isInteractive = true,  className = "",  title = DEFAULT_TITLE,  subtitle = DEFAULT_SUBTITLE,  data = DEFAULT_DATA,  invertedLabel = DEFAULT_INVERTED_LABEL,  inverted = true,}) => {  const index = 46;  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">          <TrendingUp className="h-5 w-5" />        </div>      </div>      <div className="relative z-10 flex-1 min-h-[140px]">        <div className="absolute inset-0 -ml-4">          <ResponsiveContainer width="100%" height="100%">            <LineChart data={data} margin={{ top: 10, right: 10, bottom: 0, left: 0 }}>              <CartesianGrid strokeDasharray="3 3" vertical={false} stroke="#e4e4e7" />              <XAxis dataKey="name" tick={{ fontSize: 10, fill: '#71717a' }} axisLine={false} tickLine={false} dy={10} />              <YAxis domain={[3.5, 6]} hide />              <Tooltip cursor={{ strokeDasharray: '3 3' }} contentStyle={{ borderRadius: '8px', border: 'none', backgroundColor: 'var(--tooltip-bg)', color: 'var(--tooltip-text)', fontSize: '10px' }} />              <ReferenceLine y={5} stroke="#f59e0b" strokeDasharray="3 3" label={{ position: 'right', value: 'Ref', fill: '#f59e0b', fontSize: 10 }} />              <Line type="monotone" dataKey="val" stroke="#10b981" strokeWidth={2} dot={{ r: 3, fill: '#10b981', strokeWidth: 0 }} activeDot={{ r: 5 }} />            </LineChart>          </ResponsiveContainer>        </div>        {inverted && (          <div className="absolute top-0 right-0">            <div className="flex items-center gap-1 text-amber-600 bg-amber-500/10 px-2 py-1 rounded text-[10px] font-medium border border-amber-100 dark:border-amber-900/30">              <Info className="w-3 h-3" />              {invertedLabel}            </div>          </div>        )}      </div>    </motion.div>  );};