'use client';import React from "react";import { Search, 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 SearchQuery {  query: string;  count: number;  results: number;  clickRate: number;  [key: string]: any;}interface SearchAnalyticsCardProps {  className?: string;  title?: string;  description?: string;  totalSearches?: string;  searches?: SearchQuery[];}const DEFAULT_TITLE = "Search Analytics";const DEFAULT_DESCRIPTION = "Top Searches";const DEFAULT_TOTAL_SEARCHES = "5,990";const DEFAULT_SEARCHES: SearchQuery[] = [  { query: "wireless headphones", count: 2450, results: 45, clickRate: 68 },  { query: "laptop bag", count: 1890, results: 32, clickRate: 72 },  { query: "phone case", count: 1650, results: 89, clickRate: 55 },];export const SearchAnalyticsCard: React.FC<SearchAnalyticsCardProps> = ({  className = "",  title = DEFAULT_TITLE,  description = DEFAULT_DESCRIPTION,  totalSearches = DEFAULT_TOTAL_SEARCHES,  searches = DEFAULT_SEARCHES,}) => {  const isInteractive = true;  const index = 46;  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">          <Search className="h-5 w-5 text-indigo-500" />        </div>      </div>      <div className="relative z-10 flex-1">        <div className="text-2xl font-bold text-foreground mb-1">          {totalSearches}        </div>        <p className="text-sm text-muted-foreground mb-4">          Total searches this week        </p>        <div className="space-y-3">          {searches.map((search, idx) => (            <motion.div              key={idx}              initial={{ opacity: 0, y: 5 }}              animate={{ opacity: 1, y: 0 }}              transition={{ duration: 0.4, delay: idx * 0.1 }}              className="bg-muted rounded-lg p-3"            >              <div className="flex justify-between items-center mb-2">                <span className="text-sm font-medium text-foreground">                  "{search.query}"                </span>                <span className="text-sm font-bold text-indigo-500">                  {search.count}                </span>              </div>              <div className="flex justify-between text-xs text-muted-foreground">                <span>{search.results} results</span>                <span className="text-emerald-500 font-medium">                  {search.clickRate}% click rate                </span>              </div>            </motion.div>          ))}        </div>      </div>    </motion.div>  );};