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

import { cardClass, type CardTone } from "@/lib/ui/variants";

interface CardProps extends HTMLAttributes<HTMLElement> {
  children: ReactNode;
  as?: "article" | "div" | "section";
  tone?: CardTone;
  flat?: boolean;
  interactive?: boolean;
}

export function Card({
  as: Component = "div",
  children,
  className,
  tone,
  flat,
  interactive,
  ...props
}: CardProps) {
  return (
    <Component
      className={cardClass({ tone, flat, interactive, className })}
      {...props}
    >
      {children}
    </Component>
  );
}