/**
 * components/ui/Card.tsx
 * Glassmorphism-style card component used throughout the dashboard.
 */

import { type HTMLAttributes } from "react";
import { clsx } from "clsx";

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  variant?: "default" | "glass" | "gradient";
  padding?: "none" | "sm" | "md" | "lg";
}

const variants = {
  default: "bg-slate-900 border border-slate-800",
  glass:
    "bg-slate-900/60 backdrop-blur-xl border border-slate-700/50 shadow-xl shadow-black/20",
  gradient:
    "bg-gradient-to-br from-slate-900 to-slate-800 border border-slate-700/60",
};

const paddings = {
  none: "",
  sm: "p-4",
  md: "p-6",
  lg: "p-8",
};

export function Card({
  variant = "default",
  padding = "md",
  children,
  className,
  ...props
}: CardProps) {
  return (
    <div
      className={clsx("rounded-2xl", variants[variant], paddings[padding], className)}
      {...props}
    >
      {children}
    </div>
  );
}

export function CardHeader({
  children,
  className,
}: {
  children: React.ReactNode;
  className?: string;
}) {
  return (
    <div className={clsx("mb-4 flex items-center justify-between", className)}>
      {children}
    </div>
  );
}