import { cn } from "@/app/_lib/utils"
import type React from "react"
import type { HTMLAttributes } from "react"


interface BentoGridProps extends HTMLAttributes<HTMLDivElement> {
    className?: string
    children: React.ReactNode
}

export function BentoGrid({ className, children, ...props }: BentoGridProps) {
    return (
        <div className={cn("grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4", className)} {...props}>
            {children}
        </div>
    )
}

interface BentoGridItemProps extends HTMLAttributes<HTMLDivElement> {
    className?: string
    title?: string
    description?: string
    header?: React.ReactNode
    icon?: React.ReactNode
    children?: React.ReactNode
    colSpan?: "1" | "2" | "3"
    rowSpan?: "1" | "2" | "3"
}

export function BentoGridItem({
    className,
    title,
    description,
    header,
    icon,
    children,
    colSpan = "1",
    rowSpan = "1",
    ...props
}: BentoGridItemProps) {
    return (
        <div
            className={cn(
                "row-span-1 col-span-1 rounded-xl group/bento overflow-hidden border bg-background p-4 shadow-sm transition-all hover:shadow-md",
                colSpan === "2" && "md:col-span-2",
                colSpan === "3" && "md:col-span-3",
                rowSpan === "2" && "md:row-span-2",
                rowSpan === "3" && "md:row-span-3",
                className,
            )}
            {...props}
        >
            {header && <div className="mb-4">{header}</div>}
            <div className="flex items-center gap-3 mb-4">
                {icon && (
                    <div className="p-2 w-10 h-10 shrink-0 rounded-full flex items-center justify-center bg-muted">{icon}</div>
                )}
                {(title || description) && (
                    <div className="space-y-1">
                        {title && <h3 className="font-semibold tracking-tight">{title}</h3>}
                        {description && <p className="text-sm text-muted-foreground">{description}</p>}
                    </div>
                )}
            </div>
            {children && <div>{children}</div>}
        </div>
    )
}