import { motion } from "framer-motion";
import type { ReactNode } from "react";

interface BentoCardProps {
  title: string;
  icon: ReactNode;
  span?: string;
  children: ReactNode;
  className?: string;
}

// ponytail: callers pass responsive span classes directly (e.g.
// "sm:col-span-2"). No string regex — the old replace() mangled pre-responsive
// classes and silently dropped unknown spans like col-span-3.

export function BentoCard({
  title,
  icon,
  span = "",
  children,
  className = "",
}: BentoCardProps) {
  return (
    <motion.div
      className={`glass-card flex flex-col overflow-hidden p-4 ${span} ${className}`}
      // ponytail: drop the hover scale — 12 cards bobs noticeably when the
      // cursor moves. The CSS .glass-card:hover (border + glow) is enough.
      whileTap={{ scale: 0.985 }}
      transition={{ type: "spring", stiffness: 400, damping: 25 }}
    >
      {/* Header */}
      <div className="flex items-center gap-2 pb-2 mb-3 border-b border-[var(--color-border-glass)]">
        <span className="text-[var(--color-gold-bright)]">{icon}</span>
        <h2 className="font-heading text-sm font-semibold tracking-wide text-[var(--color-text-primary)]">
          {title}
        </h2>
      </div>
      {/* Body */}
      <div className="flex-1 overflow-y-auto">{children}</div>
    </motion.div>
  );
}