{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "send-money",
  "type": "registry:component",
  "title": "Send Money",
  "description": "Quick send money interaction with confirmation, status, and feedback states.",
  "dependencies": [
    "lucide-react",
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/send-money.tsx",
      "type": "registry:component",
      "content": "'use client';\n\nimport React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { Building2, CreditCard, Wallet, X } from 'lucide-react';\nimport { MdOutlineAddCard } from 'react-icons/md';\n\nexport type PaymentType = 'bank' | 'card' | 'wallet' | null;\n\nexport interface Card {\n  id: string;\n  last4: string;\n  brand: 'visa' | 'mastercard' | 'other';\n}\n\ninterface SendMoneyProps {\n  cards?: Card[];\n  onProceed?: (data: any) => void;\n}\n\n/* ---------------- Brand Icons ---------------- */\n\nconst VisaIcon = () => (\n  <span className=\"text-sm font-semibold text-neutral-900 italic dark:text-white\">\n    VISA\n  </span>\n);\n\nconst MasterCardIcon = () => (\n  <div className=\"flex -space-x-2\">\n    <div className=\"h-4 w-4 rounded-full bg-red-600\" />\n    <div className=\"h-4 w-4 rounded-full bg-amber-400\" />\n  </div>\n);\n\n/* ---------------- Shared UI ---------------- */\n\nconst cardContainer =\n  'rounded-2xl border transition-colors bg-neutral-100 border-neutral-200 dark:bg-neutral-800 dark:border-neutral-700';\n\nconst primaryButton =\n  'h-11 w-full rounded-2xl font-medium bg-neutral-900 text-white dark:bg-white dark:text-black';\n\nconst Header = ({\n  title,\n  icon: Icon,\n  onClose,\n  id,\n}: {\n  title: string;\n  icon: any;\n  onClose: () => void;\n  id: string;\n}) => (\n  <div className=\"mb-6 flex items-center justify-between gap-3\">\n    <div className=\"flex min-w-0 items-center gap-3\">\n      <motion.div\n        layoutId={`icon-${id}`}\n        transition={{ type: 'spring', bounce: 0.3, duration: 0.7 }}\n        className=\"flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-neutral-200 bg-neutral-100 text-neutral-400 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-400\"\n      >\n        <Icon size={22} strokeWidth={1.4} />\n      </motion.div>\n      <motion.h2\n        layoutId={`title-${id}`}\n        transition={{ type: 'spring', bounce: 0.3, duration: 0.7 }}\n        className=\"truncate text-base font-medium text-neutral-600 dark:text-neutral-200\"\n      >\n        {title}\n      </motion.h2>\n    </div>\n\n    <button\n      onClick={onClose}\n      className=\"flex h-9 w-9 shrink-0 items-center justify-center rounded-full bg-neutral-100 text-neutral-500 dark:bg-neutral-800 dark:text-neutral-400\"\n    >\n      <X size={20} strokeWidth={3} />\n    </button>\n  </div>\n);\n\nconst InputField = ({ label, value, onChange }: any) => (\n  <div className=\"mb-4\">\n    <label className=\"mb-1 block text-sm text-neutral-500 dark:text-neutral-400\">\n      {label}\n    </label>\n    <input\n      value={value}\n      onChange={(e) => onChange(e.target.value)}\n      className=\"h-12 w-full rounded-xl border border-neutral-300 bg-white px-4 transition focus:border-neutral-900 focus:outline-none dark:border-neutral-700 dark:bg-neutral-900 dark:text-white dark:focus:border-neutral-500\"\n    />\n  </div>\n);\n\n/* ---------------- Views ---------------- */\n\nconst BankTransferView = ({ onClose, onProceed }: any) => {\n  const [formData, setFormData] = useState({ name: '', account: '', code: '' });\n\n  return (\n    <motion.div layout>\n      <Header\n        title=\"Bank Transfer\"\n        icon={Building2}\n        onClose={onClose}\n        id=\"bank\"\n      />\n      <motion.div\n        initial={{ opacity: 0, filter: 'blur(4px)', y: 20 }}\n        animate={{ opacity: 1, filter: 'blur(0px)', y: 0 }}\n        exit={{ opacity: 0, filter: 'blur(4px)', y: -20 }}\n        transition={{ type: 'spring', bounce: 0.4, duration: 0.7 }}\n        className=\"\"\n      >\n        <InputField\n          label=\"Full Name\"\n          value={formData.name}\n          onChange={(v: string) => setFormData({ ...formData, name: v })}\n        />\n        <InputField\n          label=\"Account Number\"\n          value={formData.account}\n          onChange={(v: string) => setFormData({ ...formData, account: v })}\n        />\n        <InputField\n          label=\"Bank Code\"\n          value={formData.code}\n          onChange={(v: string) => setFormData({ ...formData, code: v })}\n        />\n        <button\n          onClick={() => onProceed({ type: 'bank', ...formData })}\n          className={`mt-5 ${primaryButton}`}\n        >\n          Proceed\n        </button>\n      </motion.div>\n    </motion.div>\n  );\n};\n\nconst CardView = ({ cards, onClose, onProceed }: any) => {\n  const [selected, setSelected] = useState(cards[0]?.id);\n\n  return (\n    <motion.div>\n      <Header\n        title=\"Debit/Credit Card\"\n        icon={CreditCard}\n        onClose={onClose}\n        id=\"card\"\n      />\n\n      <motion.div\n        initial={{ opacity: 0, filter: 'blur(4px)', y: 20 }}\n        animate={{ opacity: 1, filter: 'blur(0px)', y: 0 }}\n        exit={{ opacity: 0, filter: 'blur(4px)', y: -20 }}\n        transition={{ type: 'spring', bounce: 0.4, duration: 0.7 }}\n        className=\"\"\n      >\n        <div className=\"mb-4 flex flex-wrap items-center justify-between gap-2\">\n          <span className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n            Available Cards\n          </span>\n          <button className=\"flex items-center gap-2 rounded-full border border-neutral-300 px-3 py-1 text-sm text-neutral-600 dark:border-neutral-700 dark:text-neutral-400\">\n            <MdOutlineAddCard size={18} />\n            Add Card\n          </button>\n        </div>\n\n        <div className=\"mb-6 space-y-3\">\n          {cards.map((card: Card) => (\n            <label\n              key={card.id}\n              onClick={() => setSelected(card.id)}\n              className={`flex h-14 cursor-pointer items-center justify-between rounded-xl border px-4 transition ${\n                selected === card.id\n                  ? 'border-neutral-300 bg-neutral-200 dark:border-neutral-600 dark:bg-neutral-800'\n                  : cardContainer\n              }`}\n            >\n              <div className=\"flex items-center gap-3\">\n                <div\n                  className={`flex h-5 w-5 items-center justify-center rounded-full border-2 ${\n                    selected === card.id\n                      ? 'border-neutral-900 dark:border-white'\n                      : 'border-neutral-400'\n                  }`}\n                >\n                  {selected === card.id && (\n                    <div className=\"h-2.5 w-2.5 rounded-full bg-neutral-900 dark:bg-white\" />\n                  )}\n                </div>\n\n                <span className=\"font-medium text-neutral-900 dark:text-white\">\n                  •••• {card.last4}\n                </span>\n              </div>\n\n              {card.brand === 'visa' ? <VisaIcon /> : <MasterCardIcon />}\n            </label>\n          ))}\n        </div>\n\n        <button\n          onClick={() => onProceed({ type: 'card', cardId: selected })}\n          className={primaryButton}\n        >\n          Proceed\n        </button>\n      </motion.div>\n    </motion.div>\n  );\n};\n\nconst WalletView = ({ onClose, onProceed }: any) => {\n  const [amount, setAmount] = useState('');\n\n  return (\n    <motion.div>\n      <Header title=\"Wallet\" icon={Wallet} onClose={onClose} id=\"wallet\" />\n\n      <motion.div\n        initial={{ opacity: 0, filter: 'blur(4px)', y: 20 }}\n        animate={{ opacity: 1, filter: 'blur(0px)', y: 0 }}\n        exit={{ opacity: 0, filter: 'blur(4px)', y: -20 }}\n        transition={{ type: 'spring', bounce: 0.4, duration: 0.7 }}\n        className=\"\"\n      >\n        <div className=\"mb-5 rounded-2xl border border-neutral-200 bg-neutral-100 p-4 dark:border-neutral-700 dark:bg-neutral-800\">\n          <p className=\"mb-1 text-sm text-neutral-500 dark:text-neutral-400\">\n            Total Balance\n          </p>\n          <h3 className=\"text-2xl font-semibold text-neutral-900 dark:text-white\">\n            $12,450.00\n          </h3>\n        </div>\n\n        <InputField\n          label=\"Amount to Send\"\n          value={amount}\n          onChange={setAmount}\n        />\n\n        <button\n          onClick={() => onProceed({ type: 'wallet', amount })}\n          className={primaryButton}\n        >\n          Proceed\n        </button>\n      </motion.div>\n    </motion.div>\n  );\n};\n\n/* ---------------- Main ---------------- */\n\nexport const SendMoney: React.FC<SendMoneyProps> = ({\n  cards = [\n    { id: '1', last4: '6756', brand: 'visa' },\n    { id: '2', last4: '4632', brand: 'mastercard' },\n  ],\n  onProceed = () => {},\n}) => {\n  const [view, setView] = useState<PaymentType>(null);\n\n  return (\n    <div className=\"flex min-h-[60vh] w-full items-center justify-center bg-transparent p-4\">\n      <motion.div\n        layout\n        className=\"w-full max-w-[400px] rounded-3xl border border-neutral-200 bg-white p-5 shadow-lg transition-all sm:p-6 dark:border-neutral-800 dark:bg-neutral-900\"\n      >\n        <AnimatePresence mode=\"wait\">\n          {!view ? (\n            <motion.div>\n              <motion.h1\n                initial={{ opacity: 0, filter: 'blur(4px)' }}\n                animate={{ opacity: 1, filter: 'blur(0px)' }}\n                exit={{ opacity: 0, filter: 'blur(4px)' }}\n                transition={{ type: 'spring', bounce: 0.3, duration: 0.7 }}\n                className=\"mb-6 text-base text-neutral-500 dark:text-neutral-400\"\n              >\n                Send Money\n              </motion.h1>\n\n              <div className=\"space-y-2\">\n                {[\n                  {\n                    id: 'bank',\n                    title: 'Bank Transfer',\n                    sub: 'Transfer to bank account',\n                    icon: Building2,\n                  },\n                  {\n                    id: 'card',\n                    title: 'Debit/Credit Card',\n                    sub: 'Send money from your card',\n                    icon: CreditCard,\n                  },\n                  {\n                    id: 'wallet',\n                    title: 'Wallet',\n                    sub: 'Transfer from your wallet',\n                    icon: Wallet,\n                  },\n                ].map((opt) => (\n                  <button\n                    key={opt.id}\n                    onClick={() => setView(opt.id as PaymentType)}\n                    className=\"flex w-full items-start sm:items-center gap-3 rounded-2xl p-3 transition hover:bg-neutral-100 sm:gap-4 sm:p-4 dark:hover:bg-neutral-800\"\n                  >\n                    <motion.div\n                      layoutId={`icon-${opt.id}`}\n                      className=\"flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-neutral-200 bg-neutral-100 text-neutral-400 dark:border-neutral-700 dark:bg-neutral-800 dark:text-neutral-400 sm:h-12 sm:w-12\"\n                    >\n                      <opt.icon size={22} className=\"sm:size-6\" />\n                    </motion.div>\n                    <div className=\"text-left\">\n                      <motion.p\n                        layoutId={`title-${opt.id}`}\n                        className=\"font-medium text-neutral-900 dark:text-white\"\n                      >\n                        {opt.title}\n                      </motion.p>\n                      <p className=\"text-sm text-neutral-500 dark:text-neutral-400\">\n                        {opt.sub}\n                      </p>\n                    </div>\n                  </button>\n                ))}\n              </div>\n            </motion.div>\n          ) : (\n            <>\n              {view === 'bank' && (\n                <BankTransferView\n                  onClose={() => setView(null)}\n                  onProceed={onProceed}\n                />\n              )}\n              {view === 'card' && (\n                <CardView\n                  cards={cards}\n                  onClose={() => setView(null)}\n                  onProceed={onProceed}\n                />\n              )}\n              {view === 'wallet' && (\n                <WalletView\n                  onClose={() => setView(null)}\n                  onProceed={onProceed}\n                />\n              )}\n            </>\n          )}\n        </AnimatePresence>\n      </motion.div>\n    </div>\n  );\n};\n"
    }
  ]
}