import type { ReactNode } from "react";

import { AppCard } from "@/components/ui/app-card";
import { cn } from "@/lib/utils";

type BentoCardProps = {
  eyebrow: string;
  title: string;
  description?: string;
  icon?: ReactNode;
  className?: string;
  children?: ReactNode;
};

export function BentoCard({
  eyebrow,
  title,
  description,
  icon,
  className,
  children,
}: BentoCardProps) {
  return (
    <AppCard
      layer="single"
      interactive
      className={cn(
        "group h-full border-border/80 bg-surface-2 transition-all duration-300 hover:-translate-y-1 hover:border-border-strong hover:bg-background/80 hover:shadow-lg",
        className,
      )}
    >
      <div className="flex h-full flex-col gap-6 p-6">
        <div className="flex items-start justify-between gap-4">
          <div className="space-y-3">
            <p className="text-xs font-semibold uppercase tracking-[0.14em] text-muted-foreground">
              {eyebrow}
            </p>
            <div className="space-y-2">
              <h3 className="text-2xl font-semibold tracking-[-0.05em] text-foreground transition-colors duration-300 group-hover:text-foreground/95">
                {title}
              </h3>
              {description ? (
                <p className="text-sm leading-7 text-muted-foreground">{description}</p>
              ) : null}
            </div>
          </div>
          {icon ? (
            <div className="flex h-11 w-11 shrink-0 items-center justify-center rounded-nested border border-border/70 bg-background text-foreground transition-all duration-300 group-hover:-translate-y-0.5 group-hover:border-border-strong group-hover:shadow-sm">
              {icon}
            </div>
          ) : null}
        </div>
        {children}
      </div>
    </AppCard>
  );
}