'use client'import React from 'react';import { BookOpenCheck } 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 CurriculumData {   name: string;   value: number;   color: string;   [key: string]: any;}interface CurriculumProgressCardProps {   className?: string;   title?: string;   subtitle?: string;   progressValue?: string;   progressLabel?: string;   data?: CurriculumData[];}const DEFAULT_DATA: CurriculumData[] = [   { name: 'Completed', value: 65, color: '#10b981' },   { name: 'In Progress', value: 25, color: '#f59e0b' },   { name: 'Remaining', value: 10, color: '#e4e4e7' },];const DEFAULT_TITLE = "Curriculum";const DEFAULT_SUBTITLE = "Syllabus Coverage";const DEFAULT_PROGRESS_VALUE = "65%";const DEFAULT_PROGRESS_LABEL = "Done";export const CurriculumProgressCard: React.FC<CurriculumProgressCardProps> = ({   className = "",   title = DEFAULT_TITLE,   subtitle = DEFAULT_SUBTITLE,   progressValue = DEFAULT_PROGRESS_VALUE,   progressLabel = DEFAULT_PROGRESS_LABEL,   data = DEFAULT_DATA,}) => {   return (      <motion.div         initial={{ opacity: 0, y: 20 }}         animate={{ opacity: 1, y: 0 }}         transition={{ duration: 0.5, delay: 0.2 }}         className={cn(            "relative overflow-hidden rounded-2xl border border-border bg-card text-card-foreground shadow-sm transition-all hover:border-emerald-300 dark:hover:border-emerald-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-emerald-500/10 p-2.5 text-emerald-500 dark:text-emerald-400 flex items-center justify-center ring-1 ring-emerald-100 dark:ring-emerald-800">                  <BookOpenCheck 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"                        startAngle={90}                        endAngle={-270}                        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">                     <span className="text-xl font-bold text-foreground">{progressValue}</span>                     <p className="text-[9px] text-muted-foreground uppercase tracking-wider">{progressLabel}</p>                  </div>               </div>            </div>         </div>         <div className="absolute -bottom-4 -right-4 z-0 opacity-5 pointer-events-none">            <BookOpenCheck className="w-32 h-32 text-emerald-500" />         </div>      </motion.div>   );};