{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "view-on-map",
  "type": "registry:component",
  "title": "View On Map",
  "description": "Map view component displaying locations with zoom, pins, and directions.",
  "dependencies": [
    "lucide-react",
    "motion",
    "react-icons"
  ],
  "files": [
    {
      "path": "components/watermelon/view-on-map.tsx",
      "type": "registry:component",
      "content": "import React, { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { X, Loader2 } from 'lucide-react';\nimport { FaMap } from 'react-icons/fa6';\n\ninterface ViewOnMapProps {\n  locationName?: string;\n  address?: string;\n  mapImageUrl?: string;\n  className?: string;\n}\n\nexport const ViewOnMap: React.FC<ViewOnMapProps> = ({\n  address = 'Boston Public Garden',\n  mapImageUrl = 'https://images.unsplash.com/photo-1526778548025-fa2f459cd5ce?q=80&w=2000&auto=format&fit=crop',\n  className = '',\n}) => {\n  const [isOpen, setIsOpen] = useState(false);\n  const [isMapLoaded, setIsMapLoaded] = useState(false);\n  const [isDark] = useState(false);\n\n  const toggleOpen = () => {\n    setIsOpen(!isOpen);\n    if (isOpen) setIsMapLoaded(false);\n  };\n\n  const springConfig = {\n    type: 'spring' as const,\n    stiffness: 400,\n    damping: 30,\n    mass: 0.8,\n  };\n\n  const publicMapUrl = `https://maps.google.com/maps?q=${encodeURIComponent(address)}&t=&z=16&ie=UTF8&iwloc=&output=embed`;\n\n  return (\n    <div className={`transition-colors duration-500`}>\n      <div\n        className={`flex min-h-full w-full flex-col items-center justify-center bg-transparent px-4`}\n      >\n        <div\n          className={`relative flex w-full items-center justify-center ${className}`}\n        >\n          <AnimatePresence mode=\"popLayout\">\n            {!isOpen ? (\n              /* --- PILL BUTTON --- */\n              <motion.div\n                key=\"button\"\n                layoutId=\"map-container\"\n                onClick={toggleOpen}\n                className=\"group relative flex cursor-pointer items-center justify-center overflow-hidden bg-[#E5E4EE] shadow-sm transition-colors duration-300 dark:bg-[#1C1C1E]\"\n                style={{ width: 180, height: 52, borderRadius: 26 }}\n                initial={{ opacity: 0, scale: 0.9 }}\n                animate={{ opacity: 1, scale: 1 }}\n                exit={{ opacity: 0, scale: 0.95 }}\n                transition={springConfig}\n                whileHover={{ scale: 1.02 }}\n                whileTap={{ scale: 0.98 }}\n              >\n                <motion.div\n                  layoutId=\"map-bg\"\n                  className=\"absolute inset-0 opacity-20 brightness-110 grayscale transition-opacity dark:opacity-10 dark:brightness-50\"\n                  style={{\n                    backgroundImage: `url(${mapImageUrl})`,\n                    backgroundSize: 'cover',\n                    backgroundPosition: 'center',\n                  }}\n                />\n\n                <motion.div className=\"relative z-10 flex items-center space-x-3 px-4 py-4\">\n                  <FaMap className=\"h-5 w-5 text-[#6A6973] transition-colors dark:text-white/60\" />\n                  <span className=\"text-[18px] font-semibold tracking-tight text-[#3D3C43] transition-colors dark:text-white\">\n                    View on Map\n                  </span>\n                </motion.div>\n              </motion.div>\n            ) : (\n              /* --- EXPANDED MAP --- */\n              <motion.div\n                key=\"map\"\n                layoutId=\"map-container\"\n                className=\"relative aspect-square w-[calc(100vw-64px)] overflow-hidden bg-[#DEDEDE] shadow-lg transition-colors duration-300 sm:w-[380px] dark:bg-[#141414]\"\n                style={{ borderRadius: 32 }}\n                transition={springConfig}\n              >\n                <motion.div\n                  initial={{ opacity: 0 }}\n                  animate={{ opacity: 1 }}\n                  transition={{ delay: 0.15 }}\n                  className=\"absolute inset-0 h-full w-full brightness-[1.02] contrast-[1.05] grayscale-[0.9] saturate-[0.8] sepia-[0.1]\"\n                >\n                  <iframe\n                    title=\"Google Map\"\n                    width=\"100%\"\n                    height=\"100%\"\n                    style={{\n                      border: 0,\n                      filter: isDark\n                        ? 'invert(90%) hue-rotate(180deg)'\n                        : 'invert(15%) hue-rotate(180deg)',\n                    }}\n                    src={publicMapUrl}\n                    allowFullScreen\n                    onLoad={() => setIsMapLoaded(true)}\n                    className={`transition-opacity duration-700 ${isMapLoaded ? 'opacity-100' : 'opacity-0'}`}\n                  />\n                </motion.div>\n\n                {!isMapLoaded && (\n                  <div className=\"absolute inset-0 flex items-center justify-center bg-[#E5E5E7] transition-colors dark:bg-[#1C1C1E]\">\n                    <Loader2 className=\"h-8 w-8 animate-spin text-gray-400\" />\n                  </div>\n                )}\n\n                {/* CLOSE BUTTON  */}\n                <motion.button\n                  initial={{ opacity: 0, scale: 0.5 }}\n                  animate={{ opacity: 1, scale: 1 }}\n                  onClick={toggleOpen}\n                  className=\"absolute top-4 right-4 z-50 flex h-10 w-10 items-center justify-center rounded-full bg-white text-[#85848B] shadow-lg transition-all hover:bg-gray-50 active:scale-90 sm:top-6 sm:right-6 sm:h-11 sm:w-11 dark:bg-[#2A2A2D] dark:text-white dark:hover:bg-[#3A3A3D]\"\n                >\n                  <X className=\"h-5 w-5 sm:h-6 sm:w-6\" strokeWidth={3} />\n                </motion.button>\n              </motion.div>\n            )}\n          </AnimatePresence>\n        </div>\n      </div>\n    </div>\n  );\n};\n"
    }
  ]
}