import * as React from "react";
import { cn } from "@/lib/utils";

interface GameCardProps extends React.HTMLAttributes<HTMLDivElement> {
  variant?: "default" | "elevated" | "sunken" | "danger";
}

const variantStyles = {
  default: "bg-[var(--bg-surface)] border-[var(--border-default)]",
  elevated:
    "bg-[var(--bg-elevated)] border-[var(--border-default)] shadow-[var(--shadow-md)]",
  sunken:
    "bg-[var(--bg-sunken)] border-[var(--border-subtle)] inset-shadow-sm",
  danger:
    "bg-[var(--bg-surface)] border-[var(--color-danger)]/60 shadow-[0_0_10px_rgba(192,57,43,0.2)]",
};

export function GameCard({
  variant = "default",
  className,
  children,
  ...props
}: GameCardProps) {
  return (
    <div
      data-slot="game-card"
      className={cn(
        "rounded-[var(--radius)] border p-6 transition-all duration-100",
        variantStyles[variant],
        className
      )}
      {...props}
    >
      {children}
    </div>
  );
}
