'use client'import React from 'react';import { Users } from 'lucide-react';import { motion } from 'motion/react';import { clsx, type ClassValue } from "clsx"import { twMerge } from "tailwind-merge"import { ResponsiveContainer, BarChart, Bar, XAxis, YAxis, Tooltip, Cell } from 'recharts';function cn(...inputs: ClassValue[]) {   return twMerge(clsx(inputs))}interface PeerData {   name: string;   value: number;   highlight: boolean;   [key: string]: any;}interface PeerComparisonCardProps {   isInteractive?: boolean;   className?: string;   title?: string;   rank?: string;   rankLabel?: string;   data?: PeerData[];}const DEFAULT_TITLE = "Peer Rank";const DEFAULT_RANK = "#2";const DEFAULT_RANK_LABEL = "Market Share";const DEFAULT_DATA: PeerData[] = [   { name: 'You', value: 18, highlight: true },   { name: 'Comp A', value: 22, highlight: false },   { name: 'Comp B', value: 11, highlight: false },   { name: 'Comp C', value: 9, highlight: false },];export const PeerComparisonCard: React.FC<PeerComparisonCardProps> = ({   isInteractive = true,   className = "",   title = DEFAULT_TITLE,   rank = DEFAULT_RANK,   rankLabel = DEFAULT_RANK_LABEL,   data = DEFAULT_DATA,}) => {   const index = 48;   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">{rank}</span>                  <span className="text-xs text-muted-foreground">{rankLabel}</span>               </div>            </div>            <div className="rounded-lg bg-emerald-500/10 p-2 text-emerald-500">               <Users className="h-5 w-5" />            </div>         </div>         <div className="relative z-10 flex-1 min-h-[140px]">            <ResponsiveContainer width="100%" height="100%">               <BarChart data={data} layout="vertical" margin={{ left: 0, right: 30 }}>                  <XAxis type="number" hide />                  <YAxis dataKey="name" type="category" width={50} tick={{ fontSize: 10, fill: '#71717a' }} axisLine={false} tickLine={false} />                  <Tooltip cursor={{ fill: 'transparent' }} contentStyle={{ borderRadius: '8px', border: 'none', backgroundColor: 'var(--tooltip-bg)', color: 'var(--tooltip-text)', fontSize: '12px' }} />                  <Bar dataKey="value" barSize={16} radius={[0, 4, 4, 0]}>                     {data.map((entry, index) => (                        <Cell key={`cell-${index}`} fill={entry.highlight ? '#10b981' : '#e4e4e7'} className={entry.highlight ? "fill-emerald-500" : "fill-zinc-200 dark:fill-zinc-700"} />                     ))}                  </Bar>               </BarChart>            </ResponsiveContainer>         </div>      </motion.div>   );};