"use client"import React, { useEffect } from 'react';import { TrendingUp, ShieldCheck } from 'lucide-react';import { motion, useMotionValue, useTransform, animate } 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 CreditScoreData {  name: string;  value: number;  fill: string;}interface CreditScoreCardProps {  isInteractive?: boolean;  className?: string;  title?: string;  score?: number;  statusLabel?: string;  provider?: string;  providerStatus?: string;  change?: string;  data?: CreditScoreData[];}const DEFAULT_TITLE = "Credit Score";const DEFAULT_SCORE = 780;const DEFAULT_STATUS_LABEL = "Excellent";const DEFAULT_PROVIDER = "Equifax";const DEFAULT_PROVIDER_STATUS = "Good";const DEFAULT_CHANGE = "+12 pts";const DEFAULT_DATA: CreditScoreData[] = [{ name: 'Score', value: 780, fill: '#10b981' }];export const CreditScoreCard: React.FC<CreditScoreCardProps> = ({  isInteractive = true,  className = "",  title = DEFAULT_TITLE,  score = DEFAULT_SCORE,  statusLabel = DEFAULT_STATUS_LABEL,  provider = DEFAULT_PROVIDER,  providerStatus = DEFAULT_PROVIDER_STATUS,  change = DEFAULT_CHANGE,  data = DEFAULT_DATA,}) => {  const index = 41;  const count = useMotionValue(0);  const rounded = useTransform(count, Math.round);  useEffect(() => {    const animation = animate(count, score, { duration: 2, ease: "easeOut" });    return animation.stop;  }, [score]);  return (    <motion.div      layoutId={isInteractive ? `card-credit-score-${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"><motion.span>{rounded}</motion.span></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">              <ShieldCheck className="w-3 h-3" /> {statusLabel}            </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] flex items-center justify-center">        <div className="h-[160px] w-full relative">          <ResponsiveContainer width="100%" height="100%">            <RadialBarChart              cx="50%"              cy="60%"              innerRadius="60%"              outerRadius="100%"              barSize={16}              data={data}              startAngle={180}              endAngle={0}            >              <PolarAngleAxis                type="number"                domain={[0, 850]}                angleAxisId={0}                tick={false}              />              <RadialBar                background={{ fill: '#f4f4f5' }} // zinc-100                dataKey="value"                cornerRadius={10}              />            </RadialBarChart>          </ResponsiveContainer>          <div className="absolute inset-0 top-10 flex flex-col items-center justify-center pointer-events-none pb-4">            <span className="text-xs text-muted-foreground uppercase tracking-widest">{provider}</span>            <span className="font-bold text-foreground text-lg">{providerStatus}</span>          </div>        </div>      </div>      <div className="z-10 mt-1 flex items-center justify-between text-xs pt-2 border-t border-border">        <span>Updated: Today</span>        <span className="flex items-center gap-1 font-medium text-emerald-500">{change}</span>      </div>    </motion.div>  );};