{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "profile-selector",
  "type": "registry:ui",
  "title": "Profile Selector",
  "description": "An interactive component for selecting a user profile from a list.",
  "files": [
    {
      "path": "registry/new-york/ui/profile-selector.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\ninterface ProfileSelectorProps {\n  profiles: { name: string; image: string }[];\n  defaultSelected?: number;\n  onSelect?: (profile: { name: string; image: string }) => void;\n  className?: string;\n}\n\nfunction ProfileSelector({\n  profiles,\n  defaultSelected = 0,\n  onSelect,\n  className,\n}: ProfileSelectorProps) {\n  const safeIndex = defaultSelected < profiles.length ? defaultSelected : 0;\n  const [selected, setSelected] = React.useState(profiles[safeIndex]);\n\n  const handleSelect = (profile: { name: string; image: string }) => {\n    setSelected(profile);\n    onSelect?.(profile);\n  };\n\n  return (\n    <div className={cn(\"w-[300px]\", className)}>\n      {/* Selected Profile Display */}\n      <div className=\"w-full outline-2 outline-hero flex gap-3 items-center rounded-sm justify-start pl-4 h-11 bg-background border-2 border-foreground transition-all duration-200\">\n        <div className=\"h-8 w-8 border-2 border-foreground rounded-full overflow-hidden\">\n          <img\n            src={selected.image}\n            alt={selected.name}\n            className=\"h-full w-full rounded-full object-cover\"\n          />\n        </div>\n        <h1 className=\"font-medium\">{selected.name}</h1>\n      </div>\n\n      {/* Profile List */}\n      <div\n        className=\"w-full mt-2 grid grid-cols-1 shadow-neo rounded-sm bg-background border-2 border-foreground overflow-hidden\"\n        style={{ gridTemplateRows: `repeat(${profiles.length}, 1fr)` }}\n      >\n        {profiles.map((profile) => (\n          <ProfileItem\n            key={profile.name}\n            name={profile.name}\n            image={profile.image}\n            isSelected={selected.name === profile.name}\n            onSelect={() => handleSelect(profile)}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n\nfunction ProfileItem({\n  name,\n  image,\n  isSelected,\n  onSelect,\n}: {\n  name: string;\n  image: string;\n  isSelected: boolean;\n  onSelect: () => void;\n}) {\n  return (\n    <div\n      onClick={onSelect}\n      className={cn(\n        \"w-full flex items-center p-2 gap-3 cursor-pointer transition-all duration-150 hover:bg-hero/30\",\n        isSelected && \"bg-hero\",\n      )}\n    >\n      <div className=\"h-8 w-8 border-2 border-foreground rounded-full overflow-hidden\">\n        <img\n          src={image}\n          alt={name}\n          className=\"h-full w-full rounded-full object-cover object-top\"\n        />\n      </div>\n      <h1 className={isSelected ? \"font-semibold\" : \"\"}>{name}</h1>\n    </div>\n  );\n}\n\nexport { ProfileSelector, ProfileItem };\n",
      "type": "registry:ui"
    }
  ]
}