import * as React from "react"
import { cn } from "@/lib/utils"

interface DrawerProps {
    children: React.ReactNode
}

interface DrawerTriggerProps {
    children: React.ReactNode
    asChild?: boolean
}

interface DrawerContentProps {
    children: React.ReactNode
    className?: string
}

interface DrawerHeaderProps {
    children: React.ReactNode
    className?: string
}

interface DrawerTitleProps {
    children: React.ReactNode
    className?: string
}

const Drawer: React.FC<DrawerProps> = ({ children }) => {
    return <div className="drawer">{children}</div>
}

const DrawerTrigger: React.FC<DrawerTriggerProps> = ({ children, asChild }) => {
    return <div className="drawer-trigger">{children}</div>
}

const DrawerContent: React.FC<DrawerContentProps> = ({ children, className }) => {
    return (
        <div className={cn("drawer-content bg-white dark:bg-gray-800 border-l border-gray-200 dark:border-gray-700", className)}>
            {children}
        </div>
    )
}

const DrawerHeader: React.FC<DrawerHeaderProps> = ({ children, className }) => {
    return (
        <div className={cn("drawer-header p-4 border-b border-gray-200 dark:border-gray-700", className)}>
            {children}
        </div>
    )
}

const DrawerTitle: React.FC<DrawerTitleProps> = ({ children, className }) => {
    return (
        <h3 className={cn("text-lg font-semibold", className)}>
            {children}
        </h3>
    )
}

export { Drawer, DrawerContent, DrawerHeader, DrawerTitle, DrawerTrigger }