{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "budget-card",
  "type": "registry:component",
  "title": "Budget Card",
  "description": "Budget overview card tracking spending, limits, and remaining balance.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/budget-card.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport React, { useState, useRef, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { ChevronDown, Check, X } from 'lucide-react';\n\ninterface BreakdownItem {\n  label: string;\n  amount: number;\n  color: string;\n}\n\ninterface BudgetCardProps {\n  month: string;\n  totalBudget: number;\n  spentAmount: number;\n  breakdown: BreakdownItem[];\n  onViewDetails?: () => void;\n  onMonthChange?: (month: string) => void;\n}\n\nconst months = [\n  'January',\n  'February',\n  'March',\n  'April',\n  'May',\n  'June',\n  'July',\n  'August',\n  'September',\n  'October',\n  'November',\n  'December',\n];\n\nexport const BudgetCard: React.FC<BudgetCardProps> = ({\n  month: initialMonth,\n  totalBudget,\n  spentAmount,\n  breakdown,\n  onViewDetails,\n  onMonthChange,\n}) => {\n  const [selectedMonth, setSelectedMonth] = useState(initialMonth);\n  const [isDropdownOpen, setIsDropdownOpen] = useState(false);\n  const [isDetailsOpen, setIsDetailsOpen] = useState(false);\n  const dropdownRef = useRef<HTMLDivElement>(null);\n\n  const spentPercentage = Math.round((spentAmount / totalBudget) * 100);\n  const remainingAmount = totalBudget - spentAmount;\n\n  const smoothTransition = { duration: 1.5, ease: [0.19, 1, 0.22, 1] } as const;\n  const cornerClass = 'absolute w-5 h-5 border-black/20 dark:border-white/20';\n\n  // Mock Transactions\n  const transactions = [\n    {\n      id: 1,\n      date: 'Jul 12',\n      name: 'Whole Foods',\n      category: 'Groceries',\n      amount: 84.5,\n    },\n    {\n      id: 2,\n      date: 'Jul 10',\n      name: 'Rent Payment',\n      category: 'Rent',\n      amount: 1600.0,\n    },\n    {\n      id: 3,\n      date: 'Jul 08',\n      name: 'Chevron Gas',\n      category: 'Other',\n      amount: 52.3,\n    },\n    {\n      id: 4,\n      date: 'Jul 05',\n      name: 'Starbucks',\n      category: 'Other',\n      amount: 12.45,\n    },\n    {\n      id: 5,\n      date: 'Jul 02',\n      name: 'Apple Subscription',\n      category: 'Other',\n      amount: 9.99,\n    },\n  ];\n\n  // Click outside logic\n  useEffect(() => {\n    const handleClickOutside = (event: MouseEvent) => {\n      if (\n        dropdownRef.current &&\n        !dropdownRef.current.contains(event.target as Node)\n      ) {\n        setIsDropdownOpen(false);\n      }\n    };\n    document.addEventListener('mousedown', handleClickOutside);\n    return () => document.removeEventListener('mousedown', handleClickOutside);\n  }, []);\n\n  const handleMonthSelect = (m: string) => {\n    setSelectedMonth(m);\n    setIsDropdownOpen(false);\n    if (onMonthChange) onMonthChange(m);\n  };\n\n  return (\n    <div className=\"relative mx-auto w-full max-w-130\">\n      <motion.div\n        initial={{ opacity: 0, y: 20, scale: 0.98 }}\n        animate={{ opacity: 1, y: 0, scale: 1 }}\n        transition={{ duration: 0.8, ease: [0.19, 1, 0.22, 1] }}\n      >\n        {/* Corner Borders */}\n        <div\n          className={`${cornerClass} top-0 left-0 z-40 border-t-[1.6px] border-l-[1.6px]`}\n        />\n        <div\n          className={`${cornerClass} top-0 right-0 z-40 border-t-[1.6px] border-r-[1.6px]`}\n        />\n        <div\n          className={`${cornerClass} bottom-0 left-0 z-40 border-b-[1.6px] border-l-[1.6px]`}\n        />\n        <div\n          className={`${cornerClass} right-0 bottom-0 z-40 border-r-[1.6px] border-b-[1.6px]`}\n        />\n\n        <div className=\"relative w-full overflow-visible border-[1.6px] border-black/8 bg-white font-sans text-black shadow-sm dark:border-[#e3d4d4]/10 dark:bg-[#0B0B0B] dark:text-white dark:shadow-2xl\">\n          {/* Top Section */}\n          <div className=\"p-6 pb-4 sm:p-8\">\n            <div className=\"mb-1 flex items-start justify-between\">\n              <p className=\"text-sm font-normal text-zinc-500 sm:text-[18px] dark:text-[#686868]\">\n                Monthly Budget\n              </p>\n\n              {/* --- Month Dropdown --- */}\n              <div className=\"relative\" ref={dropdownRef}>\n                <button\n                  onClick={() => setIsDropdownOpen(!isDropdownOpen)}\n                  className=\"flex min-w-30 items-center justify-between gap-2 border-[1.6px] border-zinc-200 bg-transparent px-3 py-1 text-sm font-normal text-zinc-500 transition-colors hover:bg-zinc-50 sm:gap-4 sm:text-[18px] dark:border-[#1e1d1d] dark:text-[#686868] dark:hover:bg-[#1A1A1A]\"\n                >\n                  {selectedMonth}\n                  <motion.div animate={{ rotate: isDropdownOpen ? 180 : 0 }}>\n                    <ChevronDown\n                      size={16}\n                      className=\"text-zinc-400 dark:text-[#7d7c7c]\"\n                    />\n                  </motion.div>\n                </button>\n\n                <AnimatePresence>\n                  {isDropdownOpen && (\n                    <motion.div\n                      initial={{ opacity: 0, y: 10, scale: 0.95 }}\n                      animate={{ opacity: 1, y: 5, scale: 1 }}\n                      exit={{ opacity: 0, y: 10, scale: 0.95 }}\n                      className=\"absolute top-full right-0 z-100 w-48 overflow-hidden border-[1.6px] border-black/8 bg-white shadow-xl dark:border-[#1e1d1d] dark:bg-[#121212]\"\n                    >\n                      <div className=\"custom-scrollbar max-h-60 overflow-y-auto py-1\">\n                        {months.map((m) => (\n                          <button\n                            key={m}\n                            onClick={() => handleMonthSelect(m)}\n                            className={`flex w-full items-center justify-between px-4 py-2.5 text-left text-sm transition-colors ${\n                              selectedMonth === m\n                                ? 'bg-zinc-100 font-medium text-zinc-900 dark:bg-white/5 dark:text-white'\n                                : 'text-zinc-500 hover:bg-zinc-50 dark:text-zinc-400 dark:hover:bg-white/2'\n                            }`}\n                          >\n                            {m}\n                            {selectedMonth === m && (\n                              <Check\n                                size={14}\n                                className=\"text-zinc-900 dark:text-white\"\n                              />\n                            )}\n                          </button>\n                        ))}\n                      </div>\n                    </motion.div>\n                  )}\n                </AnimatePresence>\n              </div>\n            </div>\n\n            <h2 className=\"mb-6 text-[40px] leading-none font-medium tracking-tight text-zinc-900 sm:mb-10 sm:text-[60px] dark:text-[#F4F4F4]\">\n              ${totalBudget.toLocaleString()}\n            </h2>\n\n            <div className=\"space-y-3\">\n              <p className=\"text-sm font-normal text-zinc-500 sm:text-[18px] dark:text-[#686868]\">\n                Monthly spending limit\n              </p>\n              <div className=\"h-2 w-full overflow-hidden bg-zinc-100 dark:bg-[#222222]\">\n                <motion.div\n                  initial={{ width: 0 }}\n                  animate={{ width: `${spentPercentage}%` }}\n                  transition={smoothTransition}\n                  className=\"h-full bg-linear-to-r from-zinc-400 to-zinc-800 dark:from-[#424243] dark:to-white/90\"\n                />\n              </div>\n              <div className=\"flex items-end justify-between pt-1\">\n                <div className=\"space-y-1.5\">\n                  <span className=\"block text-[12px] font-normal text-zinc-400 capitalize sm:text-[14px] dark:text-[#7e7d7d]\">\n                    Spent\n                  </span>\n                  <div className=\"flex items-center gap-2 sm:gap-4\">\n                    <span className=\"text-[16px] font-normal text-zinc-600 sm:text-[20px] dark:text-[#B3B3B3]\">\n                      ${spentAmount.toLocaleString()}\n                    </span>\n                    <span className=\"border border-black/5 bg-gray-100 px-1.5 py-[1.75px] text-[12px] font-normal text-zinc-500 dark:border-white/10 dark:bg-black dark:bg-linear-to-t dark:from-[#010101]/10 dark:to-white/10 dark:text-[#f1f1f1]/40\">\n                      {spentPercentage}%\n                    </span>\n                  </div>\n                </div>\n                <div className=\"space-y-2 text-right\">\n                  <span className=\"block text-[14px] font-normal text-zinc-400 capitalize sm:text-[16px] dark:text-[#7e7d7d]\">\n                    Remaining\n                  </span>\n                  <span className=\"text-[16px] font-normal text-zinc-600 sm:text-[20px] dark:text-[#B3B3B3]\">\n                    ${remainingAmount.toLocaleString()}\n                  </span>\n                </div>\n              </div>\n            </div>\n          </div>\n\n          <div className=\"h-px w-full bg-black/5 dark:bg-white/5\" />\n\n          {/* Bottom Section  */}\n          <div className=\"space-y-6 p-6 pt-7 sm:p-8\">\n            <div className=\"space-y-3\">\n              <p className=\"block text-[14px] font-normal text-zinc-400 capitalize sm:text-[16px] dark:text-[#7e7d7d]\">\n                Spending breakdown\n              </p>\n              <div className=\"flex h-2 gap-2\">\n                {breakdown.map((item, idx) => (\n                  <motion.div\n                    key={idx}\n                    initial={{ scaleX: 0 }}\n                    animate={{ scaleX: 1 }}\n                    transition={{ ...smoothTransition, delay: 0.5 + idx * 0.1 }}\n                    className=\"h-full origin-left\"\n                    style={{ flex: item.amount, background: item.color }}\n                  />\n                ))}\n              </div>\n              <div className=\"grid grid-cols-3 gap-2 sm:gap-4\">\n                {breakdown.map((item, idx) => (\n                  <div className=\"flex flex-col gap-1\" key={idx}>\n                    <p className=\"block truncate text-[12px] font-normal text-zinc-400 capitalize sm:text-[14px] dark:text-[#7e7d7d]\">\n                      {item.label}\n                    </p>\n                    <p className=\"text-[14px] font-normal text-zinc-600 sm:text-[18px] dark:text-[#B3B3B3]\">\n                      ${item.amount.toLocaleString()}\n                    </p>\n                  </div>\n                ))}\n              </div>\n            </div>\n            <button\n              onClick={() => {\n                setIsDetailsOpen(true);\n                if (onViewDetails) onViewDetails();\n              }}\n              className=\"w-full border-[1.6px] border-zinc-200 bg-transparent py-3 text-[14px] font-normal text-zinc-800 transition-colors hover:bg-zinc-50 dark:border-[#1e1d1d]/90 dark:text-[#f1f1f1] dark:hover:bg-white/5\"\n            >\n              View Details\n            </button>\n          </div>\n        </div>\n      </motion.div>\n\n      {/* --- Details Modal --- */}\n      <AnimatePresence>\n        {isDetailsOpen && (\n          <div className=\"absolute inset-0 z-100 flex items-center justify-center p-4\">\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              onClick={() => setIsDetailsOpen(false)}\n              className=\"absolute inset-0 bg-white/60 backdrop-blur-md dark:bg-black/80\"\n            />\n            <motion.div\n              initial={{ y: 20, opacity: 0, scale: 0.95 }}\n              animate={{ y: 0, opacity: 1, scale: 1 }}\n              exit={{ y: 20, opacity: 0, scale: 0.95 }}\n              transition={{ type: 'spring', damping: 25, stiffness: 300 }}\n              className=\"relative flex max-h-[90%] w-full max-w-lg flex-col overflow-hidden border-[1.6px] border-black/8 bg-white shadow-2xl dark:border-white/10 dark:bg-[#0B0B0B]\"\n            >\n              {/* Modal Header */}\n              <div className=\"flex items-center justify-between border-b border-black/5 p-6 dark:border-white/5\">\n                <div>\n                  <h3 className=\"text-lg font-semibold text-zinc-900 dark:text-white\">\n                    Budget Details\n                  </h3>\n                  <p className=\"text-xs text-zinc-500 dark:text-zinc-400\">\n                    Deep dive into your {selectedMonth} spending\n                  </p>\n                </div>\n                <button\n                  onClick={() => setIsDetailsOpen(false)}\n                  className=\"rounded-full p-2 transition-colors hover:bg-zinc-100 dark:hover:bg-white/5\"\n                >\n                  <X size={20} className=\"text-zinc-500 dark:text-zinc-400\" />\n                </button>\n              </div>\n\n              {/* Modal Content */}\n              <div className=\"custom-scrollbar flex-1 space-y-8 overflow-y-auto p-6\">\n                {/* Stats Grid */}\n                <div className=\"grid grid-cols-2 gap-3 sm:gap-4\">\n                  <div className=\"rounded-lg border border-black/5 bg-zinc-50 p-3 transition-colors sm:p-4 dark:border-white/5 dark:bg-white/2\">\n                    <p className=\"mb-1 truncate text-[9px] tracking-wide text-zinc-400 uppercase sm:text-[10px]\">\n                      Total Budget\n                    </p>\n                    <p className=\"text-lg leading-tight font-medium text-zinc-900 sm:text-xl dark:text-white\">\n                      ${totalBudget.toLocaleString()}\n                    </p>\n                  </div>\n                  <div className=\"rounded-lg border border-black/5 bg-zinc-50 p-3 transition-colors sm:p-4 dark:border-white/5 dark:bg-white/2\">\n                    <p className=\"mb-1 truncate text-[9px] tracking-wide text-zinc-400 uppercase sm:text-[10px]\">\n                      Amount Spent\n                    </p>\n                    <p className=\"text-lg leading-tight font-medium text-zinc-600 sm:text-xl dark:text-zinc-300\">\n                      ${spentAmount.toLocaleString()}\n                    </p>\n                  </div>\n                </div>\n\n                {/* Category Breakdown (Detailed) */}\n                <div className=\"space-y-4\">\n                  <h4 className=\"text-xs font-semibold tracking-widest text-zinc-400 uppercase\">\n                    Category Breakdown\n                  </h4>\n                  <div className=\"space-y-4\">\n                    {breakdown.map((item, idx) => {\n                      const percentage = Math.round(\n                        (item.amount / spentAmount) * 100,\n                      );\n                      return (\n                        <div key={idx} className=\"space-y-2\">\n                          <div className=\"flex justify-between text-sm\">\n                            <span className=\"font-medium text-zinc-600 dark:text-zinc-300\">\n                              {item.label}\n                            </span>\n                            <span className=\"text-zinc-400\">{percentage}%</span>\n                          </div>\n                          <div className=\"h-1.5 w-full overflow-hidden rounded-full bg-zinc-100 dark:bg-zinc-900\">\n                            <motion.div\n                              initial={{ width: 0 }}\n                              animate={{ width: `${percentage}%` }}\n                              className=\"h-full rounded-full\"\n                              style={{ background: item.color }}\n                            />\n                          </div>\n                        </div>\n                      );\n                    })}\n                  </div>\n                </div>\n\n                {/* Transactions History */}\n                <div className=\"space-y-4\">\n                  <h4 className=\"text-xs font-semibold tracking-widest text-zinc-400 uppercase\">\n                    Recent Transactions\n                  </h4>\n                  <div className=\"divide-y divide-black/5 border-t border-black/5 dark:divide-white/5 dark:border-white/5\">\n                    {transactions.map((t) => (\n                      <div\n                        key={t.id}\n                        className=\"group -mx-2 flex items-center justify-between gap-2 overflow-hidden rounded-md px-2 py-3 transition-colors hover:bg-zinc-50 sm:gap-4 dark:hover:bg-white/1\"\n                      >\n                        <div className=\"flex min-w-0 flex-1 items-center gap-2 sm:gap-3\">\n                          <div className=\"flex h-8 w-8 flex-shrink-0 items-center justify-center rounded-full bg-zinc-100 text-[10px] font-bold text-zinc-400 dark:bg-white/5\">\n                            {t.name[0]}\n                          </div>\n                          <div className=\"min-w-0 flex-1\">\n                            <p className=\"truncate text-sm font-medium tracking-tight text-zinc-900 uppercase dark:text-white\">\n                              {t.name}\n                            </p>\n                            <p className=\"truncate text-[10px] text-zinc-500\">\n                              {t.category} • {t.date}\n                            </p>\n                          </div>\n                        </div>\n                        <span className=\"flex-shrink-0 text-sm font-medium text-zinc-900 dark:text-zinc-300\">\n                          -${t.amount.toFixed(2)}\n                        </span>\n                      </div>\n                    ))}\n                  </div>\n                </div>\n              </div>\n\n              {/* Modal Footer */}\n              <div className=\"border-t border-black/5 p-6 dark:border-white/5\">\n                <button\n                  onClick={() => setIsDetailsOpen(false)}\n                  className=\"w-full bg-zinc-900 py-3 font-medium text-white transition-transform active:scale-[0.98] dark:bg-white dark:text-black\"\n                >\n                  Close Insights\n                </button>\n              </div>\n            </motion.div>\n          </div>\n        )}\n      </AnimatePresence>\n    </div>\n  );\n};\n"
    }
  ]
}