'use client';import React from "react";import { Share2, 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 Platform {  name: string;  visitors: number;  conversions: number;  color: string;  [key: string]: any;}interface SocialMediaTrafficCardProps {  className?: string;  title?: string;  description?: string;  totalVisitorsChange?: number;  platforms?: Platform[];}const DEFAULT_TITLE = "Social Media Traffic";const DEFAULT_DESCRIPTION = "Social Referrals";const DEFAULT_TOTAL_VISITORS_CHANGE = 24;const DEFAULT_PLATFORMS: Platform[] = [  {    name: "Instagram",    visitors: 12500,    conversions: 450,    color: "bg-pink-500",  },  {    name: "Facebook",    visitors: 8900,    conversions: 320,    color: "bg-blue-600",  },  { name: "Twitter", visitors: 5600, conversions: 180, color: "bg-sky-500" },  {    name: "TikTok",    visitors: 15200,    conversions: 520,    color: "bg-black dark:bg-white",  },];export const SocialMediaTrafficCard: React.FC<SocialMediaTrafficCardProps> = ({  className = "",  title = DEFAULT_TITLE,  description = DEFAULT_DESCRIPTION,  totalVisitorsChange = DEFAULT_TOTAL_VISITORS_CHANGE,  platforms = DEFAULT_PLATFORMS,}) => {  const isInteractive = true;  const index = 27;  const totalVisitors = platforms.reduce((sum, p) => sum + p.visitors, 0);  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">          <Share2 className="h-5 w-5 text-purple-500" />        </div>      </div>      <div className="relative z-10 flex-1">        <div className="flex items-baseline gap-2 mb-2">          <div className="text-3xl font-bold text-foreground">            {(totalVisitors / 1000).toFixed(1)}K          </div>          <div className="flex items-center gap-1 text-sm">            <TrendingUp className="h-4 w-4 text-emerald-500" />            <span className="text-emerald-500 font-medium">              +{totalVisitorsChange}%            </span>          </div>        </div>        <p className="text-sm text-muted-foreground mb-4">          Total social visitors        </p>        <div className="space-y-3">          {platforms.map((platform, idx) => {            const percentage = Math.round(              (platform.visitors / totalVisitors) * 100,            );            const conversionRate = (              (platform.conversions / platform.visitors) *              100            ).toFixed(1);            return (              <div key={idx}>                <div className="flex justify-between items-center mb-1">                  <span className="text-sm text-foreground">                    {platform.name}                  </span>                  <div className="flex items-center gap-2">                    <span className="text-xs text-muted-foreground">                      {conversionRate}% CVR                    </span>                    <span className="text-sm font-bold text-foreground">                      {(platform.visitors / 1000).toFixed(1)}K                    </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: `${percentage}%` }}                      transition={{ duration: 1, delay: idx * 0.1 }}                      className={`h-full ${platform.color} rounded-full`}                    />                  </div>                  <span className="text-xs text-muted-foreground w-8 text-right">                    {percentage}%                  </span>                </div>              </div>            );          })}        </div>      </div>    </motion.div>  );};