'use client';import React from "react";import { AlertTriangle, Package } 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 Alert {  product: string;  current: number;  reorder: number;  urgency: "critical" | "warning" | "caution";  [key: string]: any;}interface LowStockAlertsCardProps {  className?: string;  title?: string;  description?: string;  alerts?: Alert[];}const DEFAULT_TITLE = "Low Stock Alerts";const DEFAULT_DESCRIPTION = "Inventory Warnings";const DEFAULT_ALERTS: Alert[] = [  { product: "USB-C Cable", current: 12, reorder: 50, urgency: "critical" },  { product: "Phone Stand", current: 28, reorder: 50, urgency: "warning" },  {    product: "Screen Protector",    current: 45,    reorder: 100,    urgency: "caution",  },];export const LowStockAlertsCard: React.FC<LowStockAlertsCardProps> = ({  className = "",  title = DEFAULT_TITLE,  description = DEFAULT_DESCRIPTION,  alerts = DEFAULT_ALERTS,}) => {  const isInteractive = true;  const index = 12;  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">          <AlertTriangle className="h-5 w-5 text-red-500" />        </div>      </div>      <div className="relative z-10 flex-1">        <div className="flex items-center gap-2 mb-4">          <div className="text-2xl font-bold text-red-500">{alerts.length}</div>          <span className="text-sm text-muted-foreground">            items need reordering          </span>        </div>        <div className="space-y-3">          {alerts.map((alert, idx) => (            <motion.div              key={idx}              initial={{ opacity: 0, x: -20 }}              animate={{ opacity: 1, x: 0 }}              transition={{ duration: 0.5, delay: idx * 0.1 }}              className={`p-3 rounded-lg border-l-4 ${alert.urgency === "critical"                  ? "border-red-500 bg-red-50 dark:bg-red-900/10"                  : alert.urgency === "warning"                    ? "border-amber-500 bg-amber-50 dark:bg-amber-900/10"                    : "border-yellow-500 bg-yellow-50 dark:bg-yellow-900/10"                }`}            >              <div className="flex justify-between items-start mb-2">                <div className="flex items-center gap-2">                  <Package className="h-4 w-4 text-muted-foreground" />                  <span className="text-sm font-medium text-foreground">                    {alert.product}                  </span>                </div>                <span                  className={`text-xs px-2 py-1 rounded-full font-medium ${alert.urgency === "critical"                      ? "bg-red-500 text-white"                      : alert.urgency === "warning"                        ? "bg-amber-500 text-white"                        : "bg-yellow-500 text-white"                    }`}                >                  {alert.urgency.toUpperCase()}                </span>              </div>              <div className="flex justify-between text-xs text-zinc-600 dark:text-muted-foreground">                <span>Current: {alert.current} units</span>                <span>Reorder at: {alert.reorder}</span>              </div>            </motion.div>          ))}        </div>      </div>    </motion.div>  );};