{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "expandable-event-card",
  "type": "registry:component",
  "title": "Expandable Event Card",
  "description": "A stylish animated card that expands to a full-screen modal, perfect for showcasing events, concerts, or featured destinations.",
  "dependencies": [
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/expandable-event-card.tsx",
      "type": "registry:component",
      "content": "import { useState } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\n\ninterface ExpandableCardProps {\n  imageSrc?: string;\n  title?: string;\n  description?: string;\n  content?: React.ReactNode;\n}\n\nexport default function ExpandableEventCard({\n  imageSrc = \"https://assets.watermelon.sh/event.avif\",\n  title = \"Neon Nights Festival\",\n  description = \"Experience the ultimate electronic music festival with top DJs and immersive visual arts.\",\n  content\n}: ExpandableCardProps) {\n  const [isOpen, setIsOpen] = useState(false);\n  const layoutId = `expandable-event-card-${title}`;\n\n  return (\n    <>\n      <motion.div\n        layoutId={layoutId}\n        onClick={() => setIsOpen(true)}\n        className=\"cursor-pointer overflow-hidden rounded-xl bg-card border border-border hover:border-primary/30 transition-colors group shadow-sm\"\n      >\n        <motion.div layoutId={`image-container-${layoutId}`} className=\"relative h-48 w-full overflow-hidden\">\n          <motion.img \n            layoutId={`image-${layoutId}`} \n            src={imageSrc} \n            className=\"w-full h-full object-cover transition-transform duration-500 group-hover:scale-105\" \n          />\n        </motion.div>\n        <div className=\"p-4 sm:p-5\">\n          <motion.h3 layoutId={`title-${layoutId}`} className=\"text-base font-medium tracking-tight text-foreground mb-1\">{title}</motion.h3>\n          <motion.p layoutId={`desc-${layoutId}`} className=\"text-muted-foreground text-xs tracking-wide line-clamp-2\">{description}</motion.p>\n        </div>\n      </motion.div>\n\n      <AnimatePresence>\n        {isOpen && (\n          <div className=\"fixed inset-0 z-50 flex items-center justify-center p-4 sm:p-8\">\n            <motion.div\n              initial={{ opacity: 0 }}\n              animate={{ opacity: 1 }}\n              exit={{ opacity: 0 }}\n              onClick={() => setIsOpen(false)}\n              className=\"absolute inset-0 bg-background/80 backdrop-blur-md\"\n            />\n            <motion.div\n              layoutId={layoutId}\n              className=\"relative w-full max-w-2xl bg-card rounded-2xl overflow-hidden border border-border z-10 flex flex-col shadow-xl\"\n            >\n              <button \n                onClick={() => setIsOpen(false)} \n                className=\"absolute top-4 right-4 z-20 flex h-8 w-8 items-center justify-center bg-background/50 hover:bg-accent rounded-full border border-border text-foreground transition-colors backdrop-blur-sm\"\n              >\n                <svg width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M18 6 6 18\"/><path d=\"m6 6 12 12\"/></svg>\n              </button>\n              \n              <motion.div layoutId={`image-container-${layoutId}`} className=\"relative h-64 sm:h-80 w-full overflow-hidden shrink-0\">\n                <motion.img \n                  layoutId={`image-${layoutId}`} \n                  src={imageSrc} \n                  className=\"w-full h-full object-cover\" \n                />\n              </motion.div>\n              \n              <div className=\"p-6 sm:p-8 overflow-y-auto custom-scrollbar\">\n                <motion.h3 layoutId={`title-${layoutId}`} className=\"text-xl sm:text-2xl font-semibold tracking-tight text-foreground mb-2\">{title}</motion.h3>\n                <motion.p layoutId={`desc-${layoutId}`} className=\"text-primary text-xs font-medium tracking-wide uppercase mb-6\">{description}</motion.p>\n                <motion.div \n                  initial={{ opacity: 0, y: 20, filter: 'blur(4px)' }}\n                  animate={{ opacity: 1, y: 0, filter: 'blur(0px)' }}\n                  exit={{ opacity: 0, y: 10, filter: 'blur(4px)' }}\n                  transition={{ type: \"spring\", duration: 0.3, bounce: 0, delay: 0.1 }}\n                  className=\"text-foreground/80 text-sm leading-relaxed\"\n                >\n                  {content || (\n                    <div className=\"space-y-4\">\n                      <p>Join us for three unforgettable nights of pulsating beats and breathtaking light shows. The Neon Nights Festival brings together the best electronic music artists from around the globe.</p>\n                      <h4 className=\"text-foreground font-semibold mt-6 mb-2 tracking-tight\">Event Details:</h4>\n                      <ul className=\"list-disc pl-5 space-y-2 text-muted-foreground\">\n                        <li>Dates: August 15-17, 2026</li>\n                        <li>Location: Downtown Arena</li>\n                        <li>Age Restriction: 18+ only</li>\n                      </ul>\n                      <button className=\"mt-6 px-5 py-2.5 bg-primary text-primary-foreground font-medium rounded-lg hover:opacity-90 transition-opacity w-full sm:w-auto shadow-sm\">\n                        Get Tickets\n                      </button>\n                    </div>\n                  )}\n                </motion.div>\n              </div>\n            </motion.div>\n          </div>\n        )}\n      </AnimatePresence>\n    </>\n  );\n}\n"
    }
  ]
}