'use client'import React from 'react';import { ArrowRightLeft, ArrowDownRight, ArrowUpRight } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";import { BarChart, Bar, Cell, ResponsiveContainer } from 'recharts';function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}interface ReferralData {  name: string;  value: number;  color: string;  [key: string]: any;}interface ReferralTrackerCardProps {  className?: string;  title?: string;  subtitle?: string;  inboundCount?: number;  outboundCount?: number;  pendingCount?: number;  data?: ReferralData[];}const DEFAULT_DATA: ReferralData[] = [  { name: 'In', value: 128, color: '#3b82f6' }, // blue-500  { name: 'Out', value: 42, color: '#f59e0b' },  // amber-500];const DEFAULT_TITLE = "Referrals";const DEFAULT_SUBTITLE = "Flow Volume";const DEFAULT_INBOUND_COUNT = 128;const DEFAULT_OUTBOUND_COUNT = 42;const DEFAULT_PENDING_COUNT = 12;export const ReferralTrackerCard: React.FC<ReferralTrackerCardProps> = ({  className = "",  title = DEFAULT_TITLE,  subtitle = DEFAULT_SUBTITLE,  inboundCount = DEFAULT_INBOUND_COUNT,  outboundCount = DEFAULT_OUTBOUND_COUNT,  pendingCount = DEFAULT_PENDING_COUNT,  data = DEFAULT_DATA,}) => {  const isInteractive = true;  const index = 13;  return (    <motion.div      layoutId={isInteractive ? `card-${index}-${title}` : undefined}      transition={{ duration: 0.4, ease: "easeOut" }}      className={cn(        "relative overflow-hidden rounded-2xl border border-border bg-card text-card-foreground shadow-sm transition-all flex flex-col h-full",        isInteractive ? "hover:border-primary/50 hover:shadow-md" : "",        className      )}    >      <div className="p-5 flex flex-col h-full relative z-10">        <div className="mb-2 flex items-start justify-between">          <div>            <h3 className="font-bold text-lg text-foreground">              {title}            </h3>            <div className="flex items-center gap-1.5 mt-1">              <span className="relative flex h-2 w-2">                <span className="relative inline-flex rounded-full h-2 w-2 bg-blue-500"></span>              </span>              <p className="text-sm text-muted-foreground font-medium">                {subtitle}              </p>            </div>          </div>          <div className="rounded-xl bg-blue-500/10 p-2.5 text-blue-500 flex items-center justify-center ring-1 ring-blue-100 dark:ring-blue-800">            <ArrowRightLeft className="h-5 w-5" />          </div>        </div>        <div className="flex-1 flex gap-2">          <div className="flex-1 space-y-2">            <div className="bg-blue-50 dark:bg-blue-900/10 p-2 rounded-lg border border-blue-100 dark:border-blue-900/30">              <div className="flex items-center gap-1.5 mb-1 text-blue-500">                <ArrowDownRight className="h-3.5 w-3.5" />                <span className="text-[10px] font-bold uppercase tracking-wider">Inbound</span>              </div>              <span className="text-xl font-bold text-foreground">{inboundCount}</span>            </div>            <div className="bg-amber-50 dark:bg-amber-900/10 p-2 rounded-lg border border-amber-100 dark:border-amber-900/30">              <div className="flex items-center gap-1.5 mb-1 text-amber-500">                <ArrowUpRight className="h-3.5 w-3.5" />                <span className="text-[10px] font-bold uppercase tracking-wider">Outbound</span>              </div>              <span className="text-xl font-bold text-foreground">{outboundCount}</span>            </div>          </div>          <div className="w-16 flex flex-col justify-end pb-1">            <div className="h-24 w-full">              <ResponsiveContainer width="100%" height="100%">                <BarChart data={data}>                  <Bar dataKey="value" radius={[4, 4, 4, 4]}>                    {data.map((entry, index) => (                      <Cell key={`cell-${index}`} fill={entry.color} />                    ))}                  </Bar>                </BarChart>              </ResponsiveContainer>            </div>          </div>        </div>        <div className="mt-3 text-xs flex justify-between items-center text-muted-foreground">          <span>Pending Process</span>          <span className="font-bold text-blue-600">{pendingCount}</span>        </div>      </div>    </motion.div>  );};