{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "trade-summary",
  "type": "registry:component",
  "title": "Trade Summary",
  "description": "Concise trade summary card showing positions, performance, and key metrics.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/trade-summary.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport React from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport {\n  ChevronDown,\n  Search,\n  Plus,\n  MoreHorizontal,\n  Download,\n  RefreshCcw,\n  ChevronLeft,\n  ChevronRight,\n  MoreVertical,\n  X,\n  Check,\n  Loader2,\n  Trash2,\n  Copy,\n  Edit2,\n} from 'lucide-react';\n\n/* ---------- Types ---------- */\nexport interface TradeItem {\n  id: string;\n  asset: string;\n  session: string;\n  market: string;\n  strategy: string;\n  description: string;\n  pnl: number;\n  sparklineData: number[];\n  tags: string[];\n  contracts: number;\n  side: 'LONG' | 'SHORT';\n}\n\ninterface TradeSummaryProps {\n  date: string;\n  trades: TradeItem[];\n  onAddTrade?: () => void;\n}\n\n/* ---------- Sub-components ---------- */\nconst Sparkline: React.FC<{ data: number[]; color: string }> = ({\n  data,\n  color,\n}) => {\n  const width = 80;\n  const height = 24;\n  const padding = 2;\n\n  const min = Math.min(...data);\n  const max = Math.max(...data);\n  const range = max - min || 1;\n\n  const points = data\n    .map((d, i) => {\n      const x = (i / (data.length - 1)) * width;\n      const y = height - padding - ((d - min) / range) * (height - 2 * padding);\n      return `${x},${y}`;\n    })\n    .join(' ');\n\n  return (\n    <svg\n      width={width}\n      height={height}\n      viewBox={`0 0 ${width} ${height}`}\n      className=\"overflow-visible\"\n    >\n      <motion.polyline\n        fill=\"none\"\n        stroke={color}\n        strokeWidth=\"2\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n        points={points}\n        initial={{ pathLength: 0, opacity: 0 }}\n        animate={{ pathLength: 1, opacity: 1 }}\n        transition={{ duration: 1.2, ease: 'easeOut' }}\n      />\n    </svg>\n  );\n};\n\nconst FilterButton: React.FC<{ label: string }> = ({ label }) => (\n  <button className=\"flex items-center gap-1.5 rounded-md border border-gray-200 bg-transparent px-2 py-1 text-[11px] whitespace-nowrap text-zinc-500 transition-colors duration-200 hover:text-zinc-900 dark:border-[#2d2d2d] dark:text-[#a3a3a3] dark:hover:text-white\">\n    {label}\n    <ChevronDown size={12} className=\"mt-0.5\" />\n  </button>\n);\n\nconst TradeCard: React.FC<{\n  trade: TradeItem;\n  isSelected: boolean;\n  onSelect: () => void;\n  isMenuOpen: boolean;\n  onMenuToggle: () => void;\n}> = ({ trade, isSelected, onSelect, isMenuOpen, onMenuToggle }) => {\n  const isPositive = trade.pnl >= 0;\n  const accentColor = isPositive ? '#22c55e' : '#ef4444';\n\n  return (\n    <motion.div\n      layout\n      initial={{ opacity: 0, y: 10 }}\n      animate={{ opacity: 1, y: 0 }}\n      exit={{ opacity: 0, scale: 0.98 }}\n      whileHover={{ y: -1 }}\n      className={`group relative border-b border-gray-100 bg-transparent px-1 py-4 transition-all duration-300 last:border-0 dark:border-[#1c1c1c] ${isSelected ? 'rounded-xl bg-zinc-50/50 dark:bg-white/[0.02]' : ''}`}\n    >\n      <div className=\"flex items-start gap-2.5 sm:gap-3.5\">\n        <div className=\"pt-1\">\n          <button\n            onClick={onSelect}\n            className={`flex h-4 w-4 items-center justify-center rounded border-2 transition-all duration-200 ${isSelected ? 'border-[#FA692E] bg-[#FA692E] dark:border-[#FA692E]' : 'border-gray-200 group-hover:border-gray-400 dark:border-[#2d2d2d] dark:group-hover:border-[#4d4d4d]'}`}\n          >\n            {isSelected && <Check size={10} className=\"text-white\" />}\n          </button>\n        </div>\n\n        <div className=\"min-w-0 flex-1\">\n          <div className=\"mb-1 flex items-start justify-between gap-2\">\n            <div className=\"truncate\">\n              <h3 className=\"truncate text-sm font-medium tracking-tight text-zinc-800 sm:text-base dark:text-[#C4C4C4]\">\n                {trade.asset}\n              </h3>\n              <div className=\"mt-0 flex items-center gap-1 text-[8px] font-bold tracking-wider text-zinc-400 uppercase sm:gap-1.5 sm:text-[9px] dark:text-[#5F5F5F]\">\n                <span>{trade.session}</span>\n                <span>•</span>\n                <span className=\"truncate\">{trade.market}</span>\n              </div>\n            </div>\n\n            <div className=\"flex shrink-0 items-center gap-2 sm:gap-4\">\n              <div className=\"flex items-center gap-2 sm:gap-3\">\n                <div className=\"xs:block hidden\">\n                  <Sparkline data={trade.sparklineData} color={accentColor} />\n                </div>\n                <span\n                  className={`text-sm font-bold sm:text-base ${isPositive ? 'text-[#15CA25]' : 'text-red-500'} tabular-nums`}\n                >\n                  {isPositive ? '+' : ''}$\n                  {Math.abs(trade.pnl).toLocaleString(undefined, {\n                    minimumFractionDigits: 2,\n                  })}\n                </span>\n              </div>\n              <div className=\"relative\">\n                <button\n                  title=\"more\"\n                  onClick={onMenuToggle}\n                  className={`text-zinc-400 transition-colors duration-300 hover:text-zinc-600 dark:text-[#f1f1f1]/70 dark:hover:text-[#575656] ${isMenuOpen ? 'text-zinc-900 dark:text-white' : ''}`}\n                >\n                  <MoreHorizontal size={16} />\n                </button>\n                <AnimatePresence>\n                  {isMenuOpen && (\n                    <motion.div\n                      initial={{ opacity: 0, scale: 0.95, y: -5 }}\n                      animate={{ opacity: 1, scale: 1, y: 0 }}\n                      exit={{ opacity: 0, scale: 0.95, y: -5 }}\n                      className=\"absolute top-full right-0 z-50 mt-1 w-32 origin-top-right rounded-xl border border-zinc-200 bg-white shadow-xl backdrop-blur-md dark:border-zinc-800 dark:bg-[#1a1a1a]/95\"\n                    >\n                      <div className=\"p-1.5\">\n                        <button className=\"flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-[10px] text-zinc-600 transition-colors hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-white\">\n                          <Edit2 size={12} /> Edit Trade\n                        </button>\n                        <button className=\"flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-[10px] text-zinc-600 transition-colors hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-white\">\n                          <Copy size={12} /> Duplicate\n                        </button>\n                        <div className=\"my-1 h-px bg-zinc-100 dark:bg-zinc-800\" />\n                        <button className=\"flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-[10px] text-red-500 transition-colors hover:bg-red-50 dark:hover:bg-red-500/10\">\n                          <Trash2 size={12} /> Remove\n                        </button>\n                      </div>\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n              </div>\n            </div>\n          </div>\n\n          <div className=\"mt-2 sm:mt-3\">\n            <h4 className=\"text-[11px] font-medium text-zinc-700 sm:text-[12px] dark:text-[#C4C4C4]\">\n              {trade.strategy}\n            </h4>\n            <p className=\"mt-0.5 line-clamp-2 max-w-full text-[11px] leading-relaxed text-zinc-500 sm:line-clamp-none sm:text-[12px] dark:text-[#6A6A6A]\">\n              {trade.description}\n            </p>\n          </div>\n\n          <div className=\"mt-4 flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between\">\n            <div className=\"flex flex-wrap gap-1.5\">\n              {trade.tags.map((tag) => (\n                <span\n                  key={tag}\n                  className=\"cursor-default rounded-full border border-zinc-200 bg-zinc-100 px-2 py-0.5 text-[9px] text-zinc-500 transition-colors hover:bg-zinc-200 sm:text-[10px] dark:border-[#828282]/70 dark:bg-[#1c1c1c] dark:text-[#828282] dark:hover:text-white\"\n                >\n                  {tag}\n                </span>\n              ))}\n            </div>\n\n            <div className=\"flex items-center justify-between gap-2 sm:justify-end\">\n              <span className=\"rounded-full border-[0.5px] border-purple-200 bg-purple-50 px-2 pt-1 pb-0.5 text-[8px] font-bold tracking-widest text-purple-600 uppercase dark:border-[#8b5cf6]/70 dark:bg-[#292232] dark:text-[#8b5cf6]\">\n                {trade.contracts} CTRS\n              </span>\n              <span\n                className={`rounded-full border-[0.5px] px-2 pt-1 pb-0.5 text-[8px] font-bold tracking-widest uppercase ${\n                  trade.side === 'LONG'\n                    ? 'border-green-200 bg-green-50 text-[#15CA25] dark:border-[#15CA25]/70 dark:bg-[#172C19]'\n                    : 'border-red-200 bg-red-50 text-red-500 dark:border-red-500/70 dark:bg-red-900/20'\n                }`}\n              >\n                {trade.side}\n              </span>\n            </div>\n          </div>\n        </div>\n      </div>\n    </motion.div>\n  );\n};\n\n/* ---------- Main ---------- */\nexport const TradeSummary: React.FC<TradeSummaryProps> = ({\n  date,\n  trades,\n  onAddTrade,\n}) => {\n  const DATES = ['JAN 12', 'JAN 11', 'JAN 10'];\n  const [isAddingTrade, setIsAddingTrade] = React.useState(false);\n  const [selectedIds, setSelectedIds] = React.useState<string[]>([]);\n  const [activeDate, setActiveDate] = React.useState(DATES[0]);\n  const [isDownloading, setIsDownloading] = React.useState(false);\n  const [isRefreshing, setIsRefreshing] = React.useState(false);\n  const [activeMenuId, setActiveMenuId] = React.useState<string | null>(null);\n  const [isGlobalMenuOpen, setIsGlobalMenuOpen] = React.useState(false);\n\n  const totalPnl = trades.reduce((acc, curr) => acc + curr.pnl, 0);\n  const isPositiveTotal = totalPnl >= 0;\n\n  const toggleSelect = (id: string) => {\n    setSelectedIds((prev) =>\n      prev.includes(id) ? prev.filter((i) => i !== id) : [...prev, id]\n    );\n  };\n\n  const handleRefresh = () => {\n    setIsRefreshing(true);\n    setTimeout(() => setIsRefreshing(false), 2000);\n  };\n\n  const handleDownload = () => {\n    setIsDownloading(true);\n    setTimeout(() => setIsDownloading(false), 2000);\n  };\n\n  return (\n    <div className=\"w-full max-w-130\">\n      <div className=\"flex flex-col overflow-hidden rounded-[24px] border border-zinc-200 bg-white shadow-xl transition-all duration-500 dark:border-[#1c1c1c] dark:bg-[#0a0a0a]\">\n        {/* Top Header */}\n        <header className=\"flex flex-wrap items-center justify-between gap-2 px-3 py-3 sm:px-4\">\n          <div className=\"flex flex-wrap items-center gap-1.5 text-sm tracking-normal sm:gap-2\">\n            <span className=\"text-[12px] font-medium text-zinc-900 sm:text-[14px] dark:text-[#E4E4E4]\">\n              Today\n            </span>\n            <span className=\"text-xs font-bold text-zinc-300 dark:text-[#525252]\">\n              /\n            </span>\n            <span className=\"text-[8px] font-bold tracking-widest text-zinc-500 uppercase sm:text-[9px] sm:tracking-[0.2em] dark:text-[#a3a3a3]\">\n              {date}\n            </span>\n            <span className=\"mx-0.5 text-zinc-300 dark:text-[#525252]\">•</span>\n            <span\n              className={`text-[10px] font-bold sm:text-[11px] ${isPositiveTotal ? 'text-[#15CA25]' : 'text-red-500'}`}\n            >\n              {isPositiveTotal ? '+' : ''}\n              {totalPnl.toLocaleString(undefined, {\n                style: 'currency',\n                currency: 'USD',\n              })}\n            </span>\n          </div>\n\n          <button\n            onClick={() => setIsAddingTrade(true)}\n            className=\"flex items-center gap-1.5 rounded-full bg-[#FA692E] px-3 py-1.5 text-[10px] font-bold text-white shadow-md transition-all hover:bg-[#ea6733] active:scale-95 sm:py-2 sm:text-[12px] dark:text-black/70\"\n          >\n            <Plus size={14} className=\"sm:h-4 sm:w-4\" />\n            Add Trade\n          </button>\n        </header>\n\n        <AnimatePresence>\n          {isAddingTrade && (\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              className=\"absolute inset-0 z-[60] flex items-center justify-center bg-zinc-950/20 px-4 backdrop-blur-sm\"\n            >\n              <motion.div\n                initial={{ opacity: 0, scale: 0.95, y: 10 }}\n                animate={{ opacity: 1, scale: 1, y: 0 }}\n                exit={{ opacity: 0, scale: 0.95, y: 10 }}\n                className=\"relative w-full max-w-sm rounded-[24px] border border-zinc-200 bg-white p-6 shadow-2xl dark:border-zinc-800 dark:bg-[#0a0a0a]\"\n              >\n                <button\n                  onClick={() => setIsAddingTrade(false)}\n                  className=\"absolute top-4 right-4 text-zinc-400 hover:text-zinc-900 dark:hover:text-white\"\n                >\n                  <X size={20} />\n                </button>\n                <div className=\"mb-6\">\n                  <h3 className=\"text-sm font-bold text-zinc-900 dark:text-white\">\n                    Record New Trade\n                  </h3>\n                  <p className=\"mt-1 text-[10px] text-zinc-500\">\n                    Add manually executed trades to your journal.\n                  </p>\n                </div>\n                <div className=\"grid gap-3\">\n                  <input\n                    type=\"text\"\n                    placeholder=\"Asset (e.g. E-Mini S&P 500)\"\n                    className=\"w-full rounded-xl border border-zinc-200 bg-transparent px-3 py-2 text-[11px] outline-none focus:border-[#FA692E] dark:border-zinc-800 dark:focus:border-[#FA692E]\"\n                  />\n                  <div className=\"grid grid-cols-2 gap-3\">\n                    <input\n                      type=\"text\"\n                      placeholder=\"Side (LONG/SHORT)\"\n                      className=\"w-full rounded-xl border border-zinc-200 bg-transparent px-3 py-2 text-[11px] outline-none focus:border-[#FA692E] dark:border-zinc-800 dark:focus:border-[#FA692E]\"\n                    />\n                    <input\n                      type=\"text\"\n                      placeholder=\"Contracts\"\n                      className=\"w-full rounded-xl border border-zinc-200 bg-transparent px-3 py-2 text-[11px] outline-none focus:border-[#FA692E] dark:border-zinc-800 dark:focus:border-[#FA692E]\"\n                    />\n                  </div>\n                  <textarea\n                    rows={3}\n                    placeholder=\"Brief description of the setup...\"\n                    className=\"w-full rounded-xl border border-zinc-200 bg-transparent px-3 py-2 text-[11px] outline-none focus:border-[#FA692E] dark:border-zinc-800 dark:focus:border-[#FA692E]\"\n                  />\n                </div>\n                <button\n                  onClick={() => {\n                    setIsAddingTrade(false);\n                    onAddTrade?.();\n                  }}\n                  className=\"mt-6 w-full rounded-xl bg-[#FA692E] py-2.5 text-[11px] font-bold text-white shadow-lg transition-all hover:bg-[#ea6733] active:scale-[0.98]\"\n                >\n                  Save Entry\n                </button>\n              </motion.div>\n            </motion.div>\n          )}\n        </AnimatePresence>\n\n        {/* Toolbar / Filters */}\n        <div className=\"flex flex-col items-stretch gap-3 rounded-t-[22px] bg-zinc-50 px-3 pt-4 pb-2.5 sm:flex-row sm:items-center sm:px-4 dark:bg-[#171717]\">\n          <div className=\"no-scrollbar flex items-center gap-2 overflow-x-auto pb-1 sm:pb-0\">\n            <FilterButton label=\"All results\" />\n            <FilterButton label=\"All strategies\" />\n            <FilterButton label=\"More\" />\n          </div>\n\n          <div className=\"group relative flex-1\">\n            <Search\n              className=\"absolute top-1/2 left-2.5 -translate-y-1/2 text-zinc-400 transition-colors group-focus-within:text-zinc-600 dark:text-[#525252] dark:group-focus-within:text-white/40\"\n              size={14}\n            />\n            <input\n              type=\"text\"\n              placeholder=\"Search trades...\"\n              className=\"w-full rounded-2xl border border-zinc-200 bg-white py-1.5 pr-3 pl-8 text-[12px] text-zinc-900 placeholder-zinc-400 transition-all focus:border-zinc-400 focus:outline-none dark:border-[#2d2d2d] dark:bg-[#141414] dark:text-white dark:placeholder-[#525252] dark:focus:border-[#4d4d4d]\"\n            />\n          </div>\n        </div>\n\n        {/* Trade List Container */}\n        <div className=\"min-h-87.5 flex-1 overflow-y-auto rounded-b-[22px] bg-zinc-50 px-3 pb-2 sm:min-h-100 sm:px-4 dark:bg-[#171717]\">\n          <AnimatePresence mode=\"popLayout\">\n            {trades.map((trade) => (\n              <TradeCard\n                key={trade.id}\n                trade={trade}\n                isSelected={selectedIds.includes(trade.id)}\n                onSelect={() => toggleSelect(trade.id)}\n                isMenuOpen={activeMenuId === trade.id}\n                onMenuToggle={() =>\n                  setActiveMenuId(activeMenuId === trade.id ? null : trade.id)\n                }\n              />\n            ))}\n          </AnimatePresence>\n        </div>\n\n        {/* Footer Navigation */}\n        <footer className=\"flex flex-col items-center justify-between gap-4 bg-white px-3 py-4 sm:flex-row sm:px-4 dark:bg-[#0a0a0a]\">\n          <div className=\"flex w-full items-center justify-center gap-4 sm:w-auto sm:justify-start\">\n            <div className=\"relative\">\n              <button\n                title=\"options\"\n                onClick={() => setIsGlobalMenuOpen(!isGlobalMenuOpen)}\n                className={`flex h-8 w-8 items-center justify-center rounded-lg text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:text-[#525252] dark:hover:bg-white/5 dark:hover:text-white ${isGlobalMenuOpen ? 'bg-zinc-100 text-zinc-900 dark:bg-white/5 dark:text-white' : ''}`}\n              >\n                <MoreVertical size={18} />\n              </button>\n              <AnimatePresence>\n                {isGlobalMenuOpen && (\n                  <motion.div\n                    initial={{ opacity: 0, scale: 0.95, y: 5 }}\n                    animate={{ opacity: 1, scale: 1, y: 0 }}\n                    exit={{ opacity: 0, scale: 0.95, y: 5 }}\n                    className=\"absolute bottom-full left-0 z-50 mb-1 w-36 origin-bottom-left rounded-xl border border-zinc-200 bg-white shadow-xl backdrop-blur-md dark:border-zinc-800 dark:bg-[#1a1a1a]/95\"\n                  >\n                    <div className=\"p-1.5\">\n                      <button className=\"flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-[10px] text-zinc-600 transition-colors hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-white\">\n                        Analytics Settings\n                      </button>\n                      <button className=\"flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-[10px] text-zinc-600 transition-colors hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-white\">\n                        Export Config\n                      </button>\n                      <div className=\"my-1 h-px bg-zinc-100 dark:bg-zinc-800\" />\n                      <button className=\"flex w-full items-center gap-2 rounded-lg px-2 py-1.5 text-[10px] text-zinc-600 transition-colors hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-white/5 dark:hover:text-white\">\n                        History Labels\n                      </button>\n                    </div>\n                  </motion.div>\n                )}\n              </AnimatePresence>\n            </div>\n            <div className=\"h-4 w-px bg-zinc-200 dark:bg-[#2d2d2d]\" />\n            <button\n              title=\"download\"\n              onClick={handleDownload}\n              disabled={isDownloading}\n              className=\"flex h-8 w-8 items-center justify-center rounded-lg text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:text-[#525252] dark:hover:bg-white/5 dark:hover:text-white\"\n            >\n              {isDownloading ? (\n                <Loader2 size={18} className=\"animate-spin text-[#FA692E]\" />\n              ) : (\n                <Download size={18} />\n              )}\n            </button>\n            <button\n              title=\"refresh\"\n              onClick={handleRefresh}\n              disabled={isRefreshing}\n              className=\"flex h-8 w-8 items-center justify-center rounded-lg text-zinc-400 transition-colors hover:bg-zinc-100 hover:text-zinc-900 dark:text-[#525252] dark:hover:bg-white/5 dark:hover:text-white\"\n            >\n              <RefreshCcw\n                size={18}\n                className={isRefreshing ? 'animate-spin text-[#FA692E]' : ''}\n              />\n            </button>\n          </div>\n\n          <div className=\"flex w-full items-center justify-center gap-3 sm:w-auto sm:justify-end\">\n            <button\n              title=\"backward\"\n              onClick={() => {\n                const currentIndex = DATES.indexOf(activeDate);\n                if (currentIndex > 0) setActiveDate(DATES[currentIndex - 1]);\n              }}\n              disabled={DATES.indexOf(activeDate) === 0}\n              className={`transition-colors ${DATES.indexOf(activeDate) === 0 ? 'cursor-not-allowed text-zinc-200 dark:text-[#2d2d2d]' : 'text-zinc-400 hover:text-zinc-900 dark:text-[#707070] dark:hover:text-white'}`}\n            >\n              < MoreVertical size={0} className=\"hidden\" /> {/* HACK: ensuring Lucide imports stay if I accidentally mess up elsewhere, but really just for ChevronLeft */}\n              <ChevronLeft size={18} />\n            </button>\n            <div className=\"flex items-center gap-2 text-[9px] font-bold tracking-widest uppercase sm:gap-3 sm:text-[10px]\">\n              {DATES.map((day) => (\n                <button\n                  key={day}\n                  onClick={() => setActiveDate(day)}\n                  className={`relative flex px-2 py-1.75 transition-colors ${activeDate === day ? 'text-orange-600 dark:text-[#BB4D25]' : 'text-zinc-400 hover:text-zinc-600 dark:text-[#707070] dark:hover:text-[#a3a3a3]'}`}\n                >\n                  {activeDate === day && (\n                    <motion.div\n                      layoutId=\"activeDayGlow\"\n                      className=\"absolute inset-0 rounded-md border border-orange-200 bg-orange-50 dark:border-[#BB4D25]/70 dark:bg-[#2C1B14]\"\n                      transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }}\n                    />\n                  )}\n                  <span className=\"relative z-10\">{day}</span>\n                </button>\n              ))}\n            </div>\n            <button\n              title=\"forward\"\n              onClick={() => {\n                const currentIndex = DATES.indexOf(activeDate);\n                if (currentIndex < DATES.length - 1)\n                  setActiveDate(DATES[currentIndex + 1]);\n              }}\n              disabled={DATES.indexOf(activeDate) === DATES.length - 1}\n              className={`transition-colors ${DATES.indexOf(activeDate) === DATES.length - 1 ? 'cursor-not-allowed text-zinc-200 dark:text-[#2d2d2d]' : 'text-zinc-400 hover:text-zinc-900 dark:text-[#707070] dark:hover:text-white'}`}\n            >\n              <ChevronRight size={18} />\n            </button>\n          </div>\n        </footer>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}