import * as React from "react";
import * as Dialog from "@radix-ui/react-dialog";
import { cn } from "@/shared/lib/utils";

export const Drawer = Dialog.Root;
export const DrawerTrigger = Dialog.Trigger;
export const DrawerContent = ({
  children,
  className,
  ...props
}: React.HTMLAttributes<HTMLDivElement>) => (
  <Dialog.Portal>
    <Dialog.Overlay className="fixed inset-0 bg-black/50" />
    <Dialog.Content
      className={cn(
        "fixed right-0 top-0 h-full w-[400px] bg-white p-6 shadow-lg",
        className
      )}
      {...props}>
      {children}
    </Dialog.Content>
  </Dialog.Portal>
);

export const DrawerHeader: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
  className,
  children,
  ...props
}) => (
  <div className={cn("mb-4", className)} {...props}>
    {children}
  </div>
);

export const DrawerTitle = Dialog.Title;
export const DrawerDescription = Dialog.Description;

export const DrawerFooter: React.FC<React.HTMLAttributes<HTMLDivElement>> = ({
  className,
  children,
  ...props
}) => (
  <div className={cn("mt-4 flex justify-end gap-2", className)} {...props}>
    {children}
  </div>
);

export const DrawerClose = Dialog.Close;
