'use client'import React from 'react';import { PieChart as PieChartIcon } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";import { ResponsiveContainer, PieChart, Pie, Cell, Tooltip } from 'recharts';function cn(...inputs: ClassValue[]) {   return twMerge(clsx(inputs));}interface BudgetData {   name: string;   value: number;   color: string;   [key: string]: any;}interface BudgetUtilizationCardProps {   className?: string;   title?: string;   subtitle?: string;   totalBudget?: string;   data?: BudgetData[];}const DEFAULT_DATA: BudgetData[] = [   { name: 'Salaries', value: 50, color: '#8b5cf6' },   { name: 'Facilities', value: 25, color: '#a78bfa' },   { name: 'Supplies', value: 15, color: '#c4b5fd' },   { name: 'Events', value: 10, color: '#ddd6fe' },];const DEFAULT_TITLE = "Budget";const DEFAULT_SUBTITLE = "Fiscal Year Utilization";const DEFAULT_TOTAL_BUDGET = "$2.4M";export const BudgetUtilizationCard: React.FC<BudgetUtilizationCardProps> = ({   className = "",   title = DEFAULT_TITLE,   subtitle = DEFAULT_SUBTITLE,   totalBudget = DEFAULT_TOTAL_BUDGET,   data = DEFAULT_DATA,}) => {   return (      <motion.div         initial={{ opacity: 0, y: 20 }}         animate={{ opacity: 1, y: 0 }}         transition={{ duration: 0.5, delay: 0.3 }}         className={cn(            "relative overflow-hidden rounded-2xl border border-border bg-card text-card-foreground shadow-sm transition-all hover:border-violet-300 dark:hover:border-violet-700 hover:shadow-md flex flex-col h-full",            className         )}      >         <div className="p-5 flex flex-col h-full relative z-10">            <div className="mb-4 flex items-start justify-between">               <div>                  <h3 className="font-bold text-lg text-foreground">                     {title}                  </h3>                  <p className="text-sm text-muted-foreground font-medium">                     {subtitle}                  </p>               </div>               <div className="rounded-xl bg-violet-500/10 p-2.5 text-violet-500 dark:text-violet-400 flex items-center justify-center ring-1 ring-violet-100 dark:ring-violet-800">                  <PieChartIcon className="h-5 w-5" />               </div>            </div>            <div className="flex-1 w-full min-h-[120px] relative">               <ResponsiveContainer width="100%" height="100%">                  <PieChart>                     <Pie                        data={data}                        innerRadius={35}                        outerRadius={55}                        paddingAngle={5}                        dataKey="value"                        stroke="none"                     >                        {data.map((entry, index) => (                           <Cell key={`cell-${index}`} fill={entry.color} />                        ))}                     </Pie>                     <Tooltip cursor={false} content={() => null} />                  </PieChart>               </ResponsiveContainer>               <div className="absolute inset-0 flex items-center justify-center pointer-events-none">                  <div className="text-center z-10">                     <span className="text-xl font-bold text-foreground">{totalBudget}</span>                     <p className="text-[10px] text-muted-foreground uppercase tracking-wider">Total</p>                  </div>               </div>            </div>            <div className="absolute -bottom-4 -right-4 z-0 opacity-5 pointer-events-none">               <PieChartIcon className="w-32 h-32 text-violet-500" />            </div>         </div>      </motion.div>   );};