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

export const BentoGrid = ({
  className,
  children,
}: {
  className?: string;
  children?: React.ReactNode;
}) => {
  return (
    <div
      className={cn(
        // Using auto-flow dense to help grid items span horizontally if they fit
        "grid grid-cols-[repeat(auto-fit,minmax(250px,1fr))] gap-4 grid-auto-flow-dense mx-auto",
        className
      )}
    >
      {children}
    </div>
  );
};

export const BentoGridItem = ({
  className,
  title,
  rows,
  total,
}: {
  className?: string;
  title?: string;
  rows: { label: string; cost: string }[];
  total: string;
}) => {
  return (
    <div
      className={cn(
        "w-full relative rounded-xl group/bento hover:shadow-xl transition duration-200 shadow-input dark:shadow-none p-4 dark:bg-black-100 dark:border-white/[0.2] border border-transparent flex flex-col overflow-visible", 
        className
      )}
    >
      <div className="font-bold text-lg text-purple mb-2 text-center">
        {title}
      </div>
      <div className="space-y-2 overflow-visible">
        {rows.map((row, i) => (
          <div key={i} className="flex justify-between text-neutral-600 dark:text-neutral-300 border-b border-neutral-400 pb-1 w-full">
            <span>{row.label}</span>
            <span>{row.cost}</span>
          </div>
        ))}
      </div>
      <div className="mt-4 pt-2 text-neutral-800 dark:text-neutral-200 flex justify-between font-bold border-t border-neutral-400 w-full">
        <span>Total</span>
        <span>{total}</span>
      </div>
    </div>
  );
};