'use client'import React from 'react';import { Award, Briefcase } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx"import { twMerge } from "tailwind-merge"import { ResponsiveContainer, BarChart, Bar, XAxis, Tooltip, Cell } from 'recharts';function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs))}interface VestingData {  name: string;  vested: number;  unvested: number;}interface ESOPVestingCardProps {  isInteractive?: boolean;  className?: string;  title?: string;  totalOptions?: string;  optionsLabel?: string;  vestedValue?: string;  data?: VestingData[];}const DEFAULT_TITLE = "My Equity";const DEFAULT_TOTAL_OPTIONS = "15,000";const DEFAULT_OPTIONS_LABEL = "Options";const DEFAULT_VESTED_VALUE = "~$45k";const DEFAULT_DATA: VestingData[] = [  { name: 'Options', vested: 9750, unvested: 5250 },];export const ESOPVestingCard: React.FC<ESOPVestingCardProps> = ({  isInteractive = true,  className = "",  title = DEFAULT_TITLE,  totalOptions = DEFAULT_TOTAL_OPTIONS,  optionsLabel = DEFAULT_OPTIONS_LABEL,  vestedValue = DEFAULT_VESTED_VALUE,  data = DEFAULT_DATA,}) => {  const index = 34;  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">{totalOptions}</span>            <span className="text-xs text-muted-foreground">{optionsLabel}</span>          </div>        </div>        <div className="rounded-lg bg-emerald-500/10 p-2 text-emerald-500">          <Award className="h-5 w-5" />        </div>      </div>      <div className="relative z-10 flex-1 min-h-[140px]">        <div className="absolute inset-0">          <ResponsiveContainer width="100%" height="100%">            <BarChart data={data} layout="vertical" margin={{ left: 0, right: 0 }}>              <XAxis type="number" hide />              <Tooltip                cursor={{ fill: 'transparent' }}                contentStyle={{ backgroundColor: 'var(--tooltip-bg)', borderRadius: '8px', border: 'none', color: 'var(--tooltip-text)' }}              />              <Bar dataKey="vested" stackId="a" fill="#10b981" radius={[4, 0, 0, 4]} barSize={24} />              <Bar dataKey="unvested" stackId="a" fill="#e4e4e7" radius={[0, 4, 4, 0]} barSize={24} />            </BarChart>          </ResponsiveContainer>          <div className="flex justify-between items-center text-xs px-1 mt-[-20px]">            <span className="flex items-center gap-1.5"><div className="w-2 h-2 rounded-full bg-emerald-500" /> Vested (65%)</span>            <span className="flex items-center gap-1.5"><div className="w-2 h-2 rounded-full bg-zinc-200 dark:bg-zinc-700" /> Unvested</span>          </div>        </div>        <div className="absolute bottom-1 w-full p-2 bg-muted rounded flex justify-between items-center">          <div className="flex flex-col">            <span className="text-[10px] text-muted-foreground">Est. Value</span>            <span className="text-sm font-bold text-foreground">{vestedValue}</span>          </div>          <Briefcase className="w-4 h-4 text-muted-foreground" />        </div>      </div>    </motion.div>  );};