import { type HTMLAttributes, type ReactNode } from "react";

type Variant = "default" | "accent";

type CardProps = HTMLAttributes<HTMLDivElement> & {
  variant?: Variant;
  interactive?: boolean;
  as?: "div" | "section" | "article";
  children?: ReactNode;
};

const base = "rounded-2xl p-5 sm:p-6";
const variants: Record<Variant, string> = {
  default: "border border-zinc-800/60 bg-zinc-900/50",
  accent: "border border-accent-500/20 bg-gradient-to-br from-zinc-900/80 to-zinc-900/40",
};

export function Card({ variant = "default", interactive, className = "", as = "div", children, ...rest }: CardProps) {
  const Tag = as;
  const interactiveCls = interactive ? "hover:-translate-y-0.5 transition-transform cursor-pointer" : "";
  return (
    <Tag className={`${base} ${variants[variant]} ${interactiveCls} ${className}`} {...rest}>
      {children}
    </Tag>
  );
}

export function CardHeader({ className = "", children, ...rest }: HTMLAttributes<HTMLDivElement>) {
  return (
    <div className={`mb-4 flex items-start justify-between gap-3 ${className}`} {...rest}>
      {children}
    </div>
  );
}

export function CardTitle({ className = "", children, ...rest }: HTMLAttributes<HTMLHeadingElement>) {
  return (
    <h2 className={`text-base font-semibold text-zinc-100 ${className}`} {...rest}>
      {children}
    </h2>
  );
}

export function CardDescription({ className = "", children, ...rest }: HTMLAttributes<HTMLParagraphElement>) {
  return (
    <p className={`text-sm text-zinc-400 ${className}`} {...rest}>
      {children}
    </p>
  );
}