{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "edit-profile",
  "type": "registry:component",
  "title": "Edit Profile",
  "description": "Profile editing dialog with fields, validation, and save actions.",
  "dependencies": [
    "lucide-react",
    "motion"
  ],
  "files": [
    {
      "path": "components/watermelon/edit-profile.tsx",
      "type": "registry:component",
      "content": "import React, { useState, useEffect } from 'react';\nimport { motion, AnimatePresence } from 'motion/react';\nimport { X, Pencil, Clock, ChevronDown } from 'lucide-react';\n\nexport interface ProfileData {\n    fullName: string;\n    email: string;\n    timezone: string;\n    workingHours: string;\n    title: string;\n    avatarUrl: string;\n    lastUpdated: string;\n}\n\ninterface EditProfileProps {\n    isOpen: boolean;\n    onClose: () => void;\n    initialData: ProfileData;\n    onSave: (data: ProfileData) => void;\n}\n\nexport const EditProfile: React.FC<EditProfileProps> = ({\n    isOpen,\n    onClose,\n    initialData,\n    onSave\n}) => {\n    const [formData, setFormData] = useState<ProfileData>(initialData);\n\n    useEffect(() => {\n        if (isOpen) {\n            requestAnimationFrame(() => setFormData(initialData));\n        }\n    }, [isOpen, initialData]);\n\n    const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLSelectElement>) => {\n        const { name, value } = e.target;\n        setFormData((prev) => ({ ...prev, [name]: value }));\n    };\n\n    return (\n        <AnimatePresence>\n            {isOpen && (\n                <div className=\"fixed inset-0 z-100 flex items-center justify-center p-4 overflow-y-auto\">\n                    {/* Backdrop Overlay */}\n                    <motion.div\n                        initial={{ opacity: 0 }}\n                        animate={{ opacity: 1 }}\n                        exit={{ opacity: 0 }}\n                        onClick={onClose}\n                        className=\"fixed inset-0 backdrop-blur-[1px] bg-black/20 dark:bg-black/60\"\n                    />\n\n                    {/* Modal Container */}\n                    <div className=\"relative w-full max-w-180 z-101 my-auto pointer-events-none\">\n                        <motion.div\n                            initial={{ opacity: 0, scale: 0.9, y: 20 }}\n                            animate={{ opacity: 1, scale: 1, y: 0 }}\n                            exit={{ opacity: 0, scale: 0.9, y: 20 }}\n                            transition={{ type: \"spring\", damping: 20, stiffness: 300, mass: 0.8 }}\n                            className=\"pointer-events-auto w-full rounded-[24px] shadow-[0_8px_10px_rgb(0,0,0,0.04)] border overflow-hidden \n                                     bg-[#F5F5F7] border-[#f0f0f0] \n                                     dark:bg-[#1C1C1E] dark:border-[#2C2C2E]\"\n                        >\n                            {/* Header */}\n                            <div className=\"flex items-center justify-between px-6 py-4 md:px-8\">\n                                <h2 className=\"text-[18px] font-semibold text-[#010101] dark:text-white\">Edit your profile</h2>\n                                <button title='close' onClick={onClose} className=\"text-[#a0a0a0] hover:text-gray-400 transition-colors p-1\">\n                                    <X size={20} />\n                                </button>\n                            </div>\n\n                            {/* Body */}\n                            <div className=\"flex flex-col md:flex-row border-t-[1.6px] border-b-[1.6px] rounded-[18px] \n                                          border-[#EAE9F2] bg-white \n                                          dark:border-[#3A3A3C] dark:bg-[#2C2C2E]\">\n\n                                {/* Form Section */}\n                                <div className=\"flex-1 p-6 space-y-4\">\n                                    <div className=\"space-y-1.5\">\n                                        <label className=\"text-[14px] font-medium text-[#706f6f] dark:text-[#A1A1A6]\">Full name</label>\n                                        <input title='fullname'\n                                            name=\"fullName\"\n                                            value={formData.fullName}\n                                            onChange={handleChange}\n                                            className=\"w-full px-4 py-2.5 rounded-[14px] border-[1.5px] outline-none transition-all text-[15px] font-semibold\n                                                     bg-white border-[#DFDDE6] text-[#131313] focus:border-black\n                                                     dark:bg-[#3A3A3C] dark:border-[#48484A] dark:text-white dark:focus:border-blue-500\"\n                                        />\n                                    </div>\n\n                                    <div className=\"space-y-1.5\">\n                                        <label className=\"text-[14px] font-medium text-[#706f6f] dark:text-[#A1A1A6]\">Email</label>\n                                        <input title='email'\n                                            name=\"email\"\n                                            value={formData.email}\n                                            onChange={handleChange}\n                                            className=\"w-full px-4 py-2.5 rounded-[14px] border-[1.5px] outline-none font-semibold transition-all text-[15px]\n                                                     bg-white border-[#DFDDE6] text-[#131313] focus:border-black\n                                                     dark:bg-[#3A3A3C] dark:border-[#48484A] dark:text-white dark:focus:border-blue-500\"\n                                        />\n                                    </div>\n\n                                    <div className=\"flex flex-col sm:flex-row gap-4\">\n                                        <div className=\"flex-1 space-y-1.5\">\n                                            <label className=\"text-[14px] font-medium text-[#706f6f] dark:text-[#A1A1A6]\">Timezone</label>\n                                            <div className=\"relative\">\n                                                <select title='timezone'\n                                                    name=\"timezone\"\n                                                    value={formData.timezone}\n                                                    onChange={handleChange}\n                                                    className=\"w-full px-4 py-2.5 rounded-[14px] border appearance-none outline-none text-[15px] font-semibold\n                                                             bg-white border-[#DFDDE6] text-[#131313] focus:border-black\n                                                             dark:bg-[#3A3A3C] dark:border-[#48484A] dark:text-white dark:focus:border-blue-500\"\n                                                >\n                                                    <option>GMT-8</option>\n                                                    <option>GMT+5</option>\n                                                </select>\n                                                <ChevronDown size={20} className=\"absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none text-[#131313]/40 dark:text-gray-500\" />\n                                            </div>\n                                        </div>\n                                        <div className=\"flex-1 space-y-1.5\">\n                                            <label className=\"text-[14px] font-medium text-[#706f6f] dark:text-[#A1A1A6]\">Working hours</label>\n                                            <div className=\"relative\">\n                                                <input title='workingHours'\n                                                    name=\"workingHours\"\n                                                    value={formData.workingHours}\n                                                    onChange={handleChange}\n                                                    className=\"w-full px-4 py-2.5 rounded-xl border outline-none text-[14px] font-semibold\n                                                             bg-white border-[#DFDDE6] text-[#131313] focus:border-black\n                                                             dark:bg-[#3A3A3C] dark:border-[#48484A] dark:text-white dark:focus:border-blue-500\"\n                                                />\n                                                <Clock size={18} className=\"absolute right-3 top-1/2 -translate-y-1/2 text-[#131313]/40 dark:text-gray-500\" />\n                                            </div>\n                                        </div>\n                                    </div>\n\n                                    <div className=\"space-y-1.5\">\n                                        <label className=\"text-[14px] font-medium text-[#706f6f] dark:text-[#A1A1A6]\">Title</label>\n                                        <input title='title'\n                                            name=\"title\"\n                                            value={formData.title}\n                                            onChange={handleChange}\n                                            className=\"w-full px-4 py-2.5 rounded-[14px] border outline-none transition-all text-[14px] font-semibold\n                                                     bg-white border-[#DFDDE6] text-[#131313] focus:border-black\n                                                     dark:bg-[#3A3A3C] dark:border-[#48484A] dark:text-white dark:focus:border-blue-500\"\n                                        />\n                                    </div>\n                                </div>\n\n                                {/* Divider */}\n                                <div className=\"w-full h-[1.6px] md:h-auto md:w-[1.6px] border-t md:border-t-0 md:border-l border-dashed border-[#E9E8EB] dark:border-[#48484A]\" />\n\n                                {/* Preview Section */}\n                                <div className=\"flex-1 p-8 px-6 flex flex-col items-center justify-center\">\n                                    <span className=\"text-[14px] font-medium mb-4 text-[#706f6f] dark:text-[#A1A1A6]\">Preview</span>\n                                    <div className=\"relative mb-4\">\n                                        <img\n                                            src={formData.avatarUrl}\n                                            alt=\"Avatar\"\n                                            className=\"w-32 h-32 rounded-full object-cover object-top shadow-sm ring-1 ring-[#f0f0f0] dark:ring-[#48484A]\"\n                                        />\n                                        <button title='edit' className=\"absolute bottom-0 right-0 p-2 rounded-full shadow-md border \n                                                                     bg-white border-[#f0f0f0] text-[#707070]/70\n                                                                     dark:bg-[#3A3A3C] dark:border-[#48484A] dark:text-gray-300\">\n                                            <Pencil size={20} />\n                                        </button>\n                                    </div>\n                                    <h3 className=\"text-[18px] font-bold text-[#101010] dark:text-white text-center\">{formData.fullName}</h3>\n                                    <p className=\"text-[14px] mb-4 text-[#777678] dark:text-[#A1A1A6] text-center\">{formData.title}</p>\n                                    <div className=\"flex items-center gap-2 px-3 shadow-sm py-1 rounded-full text-[12px] font-medium \n                                                 bg-[#F7F7F9] text-[#101010]/60 \n                                                 dark:bg-[#3A3A3C] dark:text-[#A1A1A6]\">\n                                        <Clock size={12} className=\"text-[#777678] dark:text-[#A1A1A6]\" />\n                                        <span>{formData.workingHours}</span>\n                                    </div>\n                                </div>\n                            </div>\n\n                            {/* Footer */}\n                            <div className=\"px-6 py-5 md:px-8 flex flex-col-reverse sm:flex-row items-center justify-between gap-4 bg-[#F5F5F7] dark:bg-[#1C1C1E]\">\n                                <span className=\"text-[13px] text-[#767578]\">\n                                    Last updated: <span className=\"font-medium\">{formData.lastUpdated}</span>\n                                </span>\n                                <div className=\"flex gap-3 w-full sm:w-auto\">\n                                    <button\n                                        onClick={onClose}\n                                        className=\"flex-1 sm:flex-none px-5 py-2 rounded-full text-[14px] border-[1.6px] font-bold transition-colors\n                                                 bg-[#f3f4f6] border-[#E2E2E6] text-[#0F0F0F]\n                                                 dark:bg-[#3A3A3C] dark:border-[#48484A] dark:text-white\"\n                                    >\n                                        Cancel\n                                    </button>\n                                    <button\n                                        onClick={() => onSave(formData)}\n                                        className=\"flex-1 sm:flex-none px-5 py-2 rounded-full text-[13px] font-bold transition-colors shadow-lg shadow-black/10\n                                                 bg-[#0F0F0F] text-white hover:bg-[#222]\n                                                 dark:bg-white dark:text-black dark:hover:bg-[#E5E5E7]\"\n                                    >\n                                        Save changes\n                                    </button>\n                                </div>\n                            </div>\n                        </motion.div>\n                    </div>\n                </div>\n            )}\n        </AnimatePresence>\n    );\n};"
    }
  ]
}