Layouts

"use client";

import React from "react";
import { motion } from "framer-motion";
import { cn } from "@/app/lib/utils";

interface BentoGridProps {
  children: React.ReactNode;
  className?: string;
}

interface BentoGridItemProps {
  children: React.ReactNode;
  className?: string;
  title?: string;
  description?: string;
  header?: React.ReactNode;
  colSpan?: "1" | "2";
  rowSpan?: "1" | "2";
}

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

export function BentoGridItem({
  children,
  className,
  title,
  description,
  header,
  colSpan = "1",
  rowSpan = "1",
}: BentoGridItemProps) {
  const colSpanClasses = {
    "1": "md:col-span-1",
    "2": "md:col-span-2",
  };

  const rowSpanClasses = {
    "1": "md:row-span-1",
    "2": "md:row-span-2",
  };

  return (
    <motion.div
      initial={{ opacity: 0, scale: 0.95 }}
      whileInView={{ opacity: 1, scale: 1 }}
      viewport={{ once: true }}
      transition={{ duration: 0.5 }}
      whileHover={{ scale: 1.02 }}
      className={cn(
        "group relative overflow-hidden rounded-xl border border-border bg-surface/50 backdrop-blur-xl p-6",
        "transition-all duration-300 hover:border-accent/50",
        colSpanClasses[colSpan],
        rowSpanClasses[rowSpan],
        className
      )}
    >
      <div className="absolute inset-0 bg-gradient-to-br from-accent/5 via-transparent to-secondary/5 opacity-0 transition-opacity duration-300 group-hover:opacity-100" />

      <div className="relative z-10 flex h-full flex-col">
        {header && (
          <div className="mb-4 overflow-hidden rounded-lg">{header}</div>
        )}

        <div className="flex-1">
          {title && (
            <h3 className="mb-2 text-xl font-semibold text-foreground">
              {title}
            </h3>
          )}

          {description && (
            <p className="mb-4 text-sm text-muted-foreground leading-relaxed">
              {description}
            </p>
          )}

          {children}
        </div>
      </div>

      <div className="absolute -right-8 -top-8 h-32 w-32 rounded-full bg-accent/10 blur-2xl transition-all duration-500 group-hover:bg-accent/20" />
    </motion.div>
  );
}