'use client';import React from "react";import { Clock, 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 Hour {  time: string;  traffic: number;  orders: number;  peak: boolean;  [key: string]: any;}interface PeakHoursCardProps {  className?: string;  title?: string;  description?: string;  peakTime?: string;  totalVisitors?: string;  totalOrders?: string;  hours?: Hour[];}const DEFAULT_TITLE = "Peak Hours";const DEFAULT_DESCRIPTION = "Traffic Patterns";const DEFAULT_PEAK_TIME = "6-9 PM";const DEFAULT_TOTAL_VISITORS = "8,530 visitors";const DEFAULT_TOTAL_ORDERS = "331 orders";const DEFAULT_HOURS: Hour[] = [  { time: "9-12 AM", traffic: 1200, orders: 45, peak: false },  { time: "12-3 PM", traffic: 2100, orders: 89, peak: true },  { time: "3-6 PM", traffic: 1800, orders: 67, peak: false },  { time: "6-9 PM", traffic: 2450, orders: 102, peak: true },  { time: "9-12 PM", traffic: 980, orders: 28, peak: false },];export const PeakHoursCard: React.FC<PeakHoursCardProps> = ({  className = "",  title = DEFAULT_TITLE,  description = DEFAULT_DESCRIPTION,  peakTime = DEFAULT_PEAK_TIME,  totalVisitors = DEFAULT_TOTAL_VISITORS,  totalOrders = DEFAULT_TOTAL_ORDERS,  hours = DEFAULT_HOURS,}) => {  const isInteractive = true;  const index = 49;  const maxTraffic = Math.max(...hours.map((h) => h.traffic));  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">          <Clock className="h-5 w-5 text-indigo-500" />        </div>      </div>      <div className="relative z-10 flex-1">        <div className="flex items-baseline gap-2 mb-4">          <div className="text-2xl font-bold text-foreground">{peakTime}</div>          <span className="text-sm text-muted-foreground">Peak time</span>        </div>        <div className="flex items-end justify-between h-32 gap-2 mb-4">          {hours.map((hour, idx) => {            const height = (hour.traffic / maxTraffic) * 100;            return (              <div                key={idx}                className="flex-1 flex flex-col items-center gap-2"              >                <motion.div                  initial={{ height: 0 }}                  animate={{ height: `${height}%` }}                  transition={{ duration: 0.8, delay: idx * 0.1 }}                  className={`w-full rounded-t-lg relative ${hour.peak                      ? "bg-gradient-to-t from-indigo-500 to-indigo-400"                      : "bg-gradient-to-t from-zinc-300 to-zinc-200 dark:from-zinc-700 dark:to-zinc-600"                    }`}                >                  {hour.peak && (                    <div className="absolute -top-6 left-1/2 -translate-x-1/2 text-xs font-medium text-indigo-500">                      {hour.orders}                    </div>                  )}                </motion.div>                <span className="text-xs text-muted-foreground text-center">                  {hour.time}                </span>              </div>            );          })}        </div>        <div className="flex items-center justify-between text-xs text-muted-foreground">          <span>Total: {totalVisitors}</span>          <span>{totalOrders}</span>        </div>      </div>    </motion.div>  );};