import { ElementType, ReactNode } from "react";
import clsx from "clsx";
import styles from "./Card.module.css";

type CardVariant = "default" | "strong" | "subtle";

type CardProps = {
  as?: ElementType;
  children: ReactNode;
  className?: string | undefined;
  hoverable?: boolean;
  padded?: boolean;
  variant?: CardVariant;
};

export function Card({
  as: Component = "section",
  children,
  className,
  hoverable = false,
  padded = true,
  variant = "default",
}: CardProps) {
  return (
    <Component
      className={clsx(styles.root, styles[variant], hoverable && styles.hoverable, padded && styles.padded, className)}
    >
      {children}
    </Component>
  );
}