'use client';import React from "react";import { MousePointer, TrendingUp } from "lucide-react";import { motion } from "motion/react";import { clsx, type ClassValue } from "clsx";import { twMerge } from "tailwind-merge";function cn(...inputs: ClassValue[]) {   return twMerge(clsx(inputs));}interface Source {   source: string;   visitors: number;   percentage: number;   color: string;   [key: string]: any;}interface TrafficSourcesCardProps {   className?: string;   title?: string;   description?: string;   totalVisitors?: string;   sources?: Source[];}const DEFAULT_TITLE = "Traffic Sources";const DEFAULT_DESCRIPTION = "Visitor Attribution";const DEFAULT_TOTAL_VISITORS = "30K";const DEFAULT_SOURCES: Source[] = [   {      source: "Organic Search",      visitors: 12500,      percentage: 42,      color: "bg-emerald-500",   },   { source: "Direct", visitors: 7800, percentage: 26, color: "bg-blue-500" },   {      source: "Social Media",      visitors: 5200,      percentage: 17,      color: "bg-purple-500",   },   { source: "Paid Ads", visitors: 4500, percentage: 15, color: "bg-amber-500" },];export const TrafficSourcesCard: React.FC<TrafficSourcesCardProps> = ({   className = "",   title = DEFAULT_TITLE,   description = DEFAULT_DESCRIPTION,   totalVisitors = DEFAULT_TOTAL_VISITORS,   sources = DEFAULT_SOURCES,}) => {   const isInteractive = true;   const index = 42;   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-6 shadow-sm transition-all flex flex-col group",            isInteractive               ? "cursor-pointer hover:border-zinc-300 dark:hover:border-zinc-700"               : "",            className,         )}      >         <div className="mb-4 flex items-start justify-between relative z-10">            <div>               <h3 className="font-semibold text-lg tracking-tight text-foreground">                  {title}               </h3>               {description && (                  <p className="text-sm text-muted-foreground mt-1">{description}</p>               )}            </div>            <div className="rounded-full bg-zinc-100 dark:bg-zinc-800 p-2 text-foreground flex items-center justify-center">               <MousePointer className="h-5 w-5 text-blue-500" />            </div>         </div>         <div className="relative z-10 flex-1">            <div className="text-2xl font-bold text-foreground mb-1">               {totalVisitors}            </div>            <p className="text-sm text-muted-foreground mb-4">Total visitors</p>            <div className="space-y-3">               {sources.map((item, idx) => (                  <div key={idx}>                     <div className="flex justify-between items-center mb-1">                        <span className="text-sm text-foreground">{item.source}</span>                        <div className="flex items-center gap-2">                           <span className="text-xs text-muted-foreground">                              {(item.visitors / 1000).toFixed(1)}K                           </span>                           <span className="text-sm font-bold text-foreground">                              {item.percentage}%                           </span>                        </div>                     </div>                     <div className="flex items-center gap-2">                        <div className="flex-1 bg-zinc-100 dark:bg-zinc-800 rounded-full h-2 overflow-hidden">                           <motion.div                              initial={{ width: 0 }}                              animate={{ width: `${item.percentage}%` }}                              transition={{ duration: 1, delay: idx * 0.1 }}                              className={`h-full ${item.color} rounded-full`}                           />                        </div>                     </div>                  </div>               ))}            </div>         </div>      </motion.div>   );};