"use client";

import { cn } from "@/lib/utils";
import { GlowCard } from "./GlowCard";

type BentoSize = "default" | "wide" | "tall" | "featured";

const sizeClasses: Record<BentoSize, string> = {
  default: "",
  wide: "md:col-span-2",
  tall: "md:row-span-2",
  featured: "md:col-span-2 md:row-span-2",
};

export function BentoGrid({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div
      className={cn(
        "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 auto-rows-[minmax(200px,auto)]",
        className,
      )}
    >
      {children}
    </div>
  );
}

export function BentoCard({
  size = "default",
  className,
  children,
}: {
  size?: BentoSize;
  className?: string;
  children: React.ReactNode;
}) {
  return (
    <GlowCard
      className={cn(
        "p-6 h-full flex flex-col",
        sizeClasses[size],
        className,
      )}
    >
      <div className="relative z-10 flex flex-col h-full">{children}</div>
    </GlowCard>
  );
}
