'use client';import React from "react";import { Truck, Star, Clock } 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 Carrier {  name: string;  rating: number;  avgTime: string;}interface CarrierPerformanceCardProps {  className?: string;  title?: string;  carriers?: Carrier[];}const DEFAULT_TITLE = "Carrier Performance";const DEFAULT_CARRIERS: Carrier[] = [  { name: "FedEx", rating: 4.8, avgTime: "2.1 days" },  { name: "UPS", rating: 4.6, avgTime: "2.3 days" },  { name: "USPS", rating: 4.2, avgTime: "2.8 days" },];export const CarrierPerformanceCard: React.FC<CarrierPerformanceCardProps> = ({  className = "",  title = DEFAULT_TITLE,  carriers = DEFAULT_CARRIERS,}) => {  const isInteractive = true;  const index = 27;  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>          <p className="text-sm text-muted-foreground mt-1">            On-time delivery rates          </p>        </div>        <div className="rounded-full bg-zinc-100 dark:bg-zinc-800 p-2 text-foreground flex items-center justify-center">          <Truck className="h-5 w-5 text-cyan-500" />        </div>      </div>      <div className="relative z-10 flex-1 space-y-3">        {carriers.map((carrier, i) => (          <div key={i} className="flex justify-between items-center text-sm">            <p className="font-medium">{carrier.name}</p>            <div className="flex items-center gap-4">              <div className="flex items-center gap-1">                <Star className="h-4 w-4 text-yellow-500" />                <span>{carrier.rating}</span>              </div>              <div className="flex items-center gap-1">                <Clock className="h-4 w-4 text-muted-foreground" />                <span>{carrier.avgTime}</span>              </div>            </div>          </div>        ))}      </div>    </motion.div>  );};