'use client';import React from "react";import { Map, ShoppingBag, CreditCard, Star } 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 Step {  name: string;  icon: React.ElementType;  status: "completed" | "current" | "next";}interface CustomerJourneyCardProps {  className?: string;  title?: string;  steps?: Step[];}const DEFAULT_TITLE = "Customer Journey";const DEFAULT_STEPS: Step[] = [  { name: "Discovery", icon: Map, status: "completed" },  { name: "Add to Cart", icon: ShoppingBag, status: "completed" },  { name: "Checkout", icon: CreditCard, status: "current" },  { name: "Review", icon: Star, status: "next" },];export const CustomerJourneyCard: React.FC<CustomerJourneyCardProps> = ({  className = "",  title = DEFAULT_TITLE,  steps = DEFAULT_STEPS,}) => {  const isInteractive = true;  const index = 32;  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">Common user path</p>        </div>      </div>      <div className="relative z-10 flex-1 flex items-center">        <div className="flex w-full justify-between items-center">          {steps.map((step, i) => (            <React.Fragment key={step.name}>              <div className="flex flex-col items-center gap-2">                <div                  className={cn(                    "rounded-full h-10 w-10 flex items-center justify-center",                    step.status === "completed" && "bg-emerald-500 text-white",                    step.status === "current" && "bg-blue-500 text-white",                    step.status === "next" && "bg-zinc-100 dark:bg-zinc-800",                  )}                >                  <step.icon className="h-5 w-5" />                </div>                <p className="text-xs font-medium text-center">{step.name}</p>              </div>              {i < steps.length - 1 && (                <div className="flex-1 h-0.5 bg-border mx-2"></div>              )}            </React.Fragment>          ))}        </div>      </div>    </motion.div>  );};