import { Camera, Image, X } from "lucide-react";
import { Drawer, DrawerContent, DrawerHeader, DrawerTitle } from "../ui/drawer";

interface ImageUploadDrawerProps {
  isOpen: boolean;
  onOpenChange: (open: boolean) => void;
  onCameraSelect: () => void;
  onGallerySelect: () => void;
}

export const ImageUploadDrawer = ({
  isOpen,
  onOpenChange,
  onCameraSelect,
  onGallerySelect,
}: ImageUploadDrawerProps) => {
  return (
    <Drawer open={isOpen} onOpenChange={onOpenChange}>
      <DrawerContent>
        <DrawerHeader className="flex items-center justify-between">
          <X
            size={24}
            className="text-BLACK2"
            onClick={() => onOpenChange(false)}
          />
          <DrawerTitle className="text-center text-B12 fonr-bold">
            تصاویر محصول
          </DrawerTitle>
          <div />
        </DrawerHeader>

        <div className="flex gap-10 p-4 pb-6 items-center justify-center">
          <div
            className="flex flex-col items-center justify-center gap-1"
            onClick={onCameraSelect}
            onKeyDown={(e) =>
              (e.key === "Enter" || e.key === " ") && onCameraSelect()
            }
            role="button"
            tabIndex={0}
            aria-label="Camera"
          >
            <div className="bg-BLACK h-12 w-12 shrink-0 flex flex-col items-center justify-center rounded-full">
              <Camera size={24} className="text-WHITE" />
            </div>
            <p className="text-R12">دوربین</p>
          </div>
          <div
            onClick={onGallerySelect}
            onKeyDown={(e) =>
              (e.key === "Enter" || e.key === " ") && onGallerySelect()
            }
            role="button"
            tabIndex={0}
            aria-label="Gallery"
            className="flex flex-col items-center justify-center gap-1"
          >
            <div className="bg-BLACK h-12 w-12 shrink-0 flex flex-col items-center justify-center rounded-full">
              <Image size={24} className="text-WHITE" />
            </div>
            <p className="text-R12">گالری</p>
          </div>
        </div>
      </DrawerContent>
    </Drawer>
  );
};