"use client";

import { PSEUDO_COLLECTIONS } from "./shared";
import { FolderPlus } from "lucide-react";
import {
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerHeader,
  DrawerTitle,
} from "@/components/ui/drawer";

export function CollectionsDrawer({
  open,
  onClose,
  isMobile,
}: {
  open: boolean;
  onClose: () => void;
  isMobile: boolean;
}) {
  const direction = isMobile ? "bottom" : "right";

  return (
    <Drawer
      open={open}
      onOpenChange={(o) => !o && onClose()}
      direction={direction}
    >
      <DrawerContent
        direction={direction}
        className="bg-black dark:bg-[#1a1a1a] border-white/10"
      >
        <DrawerHeader className="text-left border-b border-white/10 pb-4">
          <DrawerTitle className="text-white">Save to Collection</DrawerTitle>
        </DrawerHeader>
        <div className="overflow-y-auto flex-1 p-4 space-y-1">
          {PSEUDO_COLLECTIONS.map((col) => (
            <button
              key={col.id}
              onClick={() => {
                // TODO: Implement save to collection
                onClose();
              }}
              className="flex items-center justify-between gap-3 w-full px-3 py-3 rounded-lg text-left hover:bg-white/10 transition-colors"
            >
              <div className="flex items-center gap-3">
                <div className="flex items-center justify-center size-9 rounded-lg bg-white/10">
                  <FolderPlus className="size-4 text-white/50" />
                </div>
                <span className="text-sm font-medium text-white/90">
                  {col.name}
                </span>
              </div>
              <span className="text-xs text-white/50 tabular-nums">
                {col.count}
              </span>
            </button>
          ))}

          {/* Create new collection */}
          <button
            onClick={() => {
              // TODO: Implement create collection
              onClose();
            }}
            className="flex items-center gap-3 w-full px-3 py-3 rounded-lg text-left hover:bg-white/10 transition-colors mt-2 border border-dashed border-white/20"
          >
            <div className="flex items-center justify-center size-9 rounded-lg bg-amber-400/15">
              <FolderPlus className="size-4 text-amber-400" />
            </div>
            <span className="text-sm font-medium text-amber-400">
              New Collection
            </span>
          </button>
        </div>
      </DrawerContent>
    </Drawer>
  );
}