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

export interface BentoItem {
  title: string;
  description: string;
  icon?: React.ReactNode;
  className?: string;
}

export function BentoGrid({
  items,
  className,
}: {
  items: BentoItem[];
  className?: string;
}) {
  return (
    <div className={cn("grid auto-rows-[13rem] grid-cols-1 gap-4 md:grid-cols-3", className)}>
      {items.map((item, index) => (
        <div
          key={index}
          className={cn(
            "group relative flex flex-col justify-between overflow-hidden rounded-xl border bg-card p-5 transition-all hover:shadow-lg",
            item.className
          )}
        >
          <div className="pointer-events-none absolute inset-0 opacity-0 transition-opacity duration-500 group-hover:opacity-100">
            <div className="absolute -inset-px rounded-xl bg-gradient-to-br from-violet-500/10 via-transparent to-sky-500/10" />
          </div>

          <div className="relative flex size-9 items-center justify-center rounded-lg border bg-background text-muted-foreground transition-colors group-hover:text-foreground">
            {item.icon}
          </div>

          <div className="relative">
            <h3 className="text-sm font-medium">{item.title}</h3>
            <p className="mt-1 text-sm leading-relaxed text-muted-foreground">
              {item.description}
            </p>
          </div>
        </div>
      ))}
    </div>
  );
}

Related components