import { cn } from "@/lib/utils";
import { CT, CP } from "@/components/Texts";
import React from 'react';
import { motion } from 'framer-motion';

export const BentoGrid = ({
  className,
  children,
}: {
  className?: string;
  children?: React.ReactNode;
}) => {
  return (
    <div
      className={cn(
        "mx-4 grid max-w-6xl grid-cols-1 gap-4 lg:grid-cols-3",
        className,
      )}
    >
      {children}
    </div>
  );
};

interface BentoGridItemProps {
  className?: string;
  title?: string | React.ReactNode;
  subtitle?: string | React.ReactNode;
  description?: string | React.ReactNode;
  img?: string;
  video?: string;
  rowHeight?: string;
}

export const BentoGridItem = React.forwardRef<HTMLDivElement, BentoGridItemProps>(
  ({ className, title, subtitle, description, img, video, rowHeight }, ref) => {
    return (
      <div
        ref={ref}
        className={cn(
          "group/bento shadow-input row-span-1 flex flex-col justify-between rounded-xl border border-black bg-black/10 backdrop-blur-md transition-all duration-300 ease-in-out hover:scale-105 hover:border-black hover:bg-black/40",
          rowHeight ? rowHeight : "h-full",
          className
        )}
      >
                <div className="relative w-full h-[65%] min-h-[6rem] bg-transparent overflow-hidden">
          {video ? (
            <video
              src={video}
              autoPlay
              loop
              muted
              playsInline
              className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
            />
          ) : img ? (
            <img
              src={img}
              alt={title as string}
              className="w-full h-full object-cover opacity-90 group-hover/bento:opacity-100 transition-opacity duration-300"
            />
          ) : null}
        </div>
        <div className="p-4 transition bg-white/5 hover:bg-white/7 backdrop-blur-md duration-200 group-hover/bento:translate-x-2 ">
          <CT>{title}</CT>
          <CP className="font-medium">{subtitle}</CP>
          <CP className="mt-2">{description}</CP>
        </div>
      </div>
    );
  }
);

BentoGridItem.displayName = "BentoGridItem";

export const MotionBentoGridItem = motion(BentoGridItem);