import { HTMLAttributes } from "react";
import { cn } from "@/lib/utils";

interface CardProps extends HTMLAttributes<HTMLDivElement> {
  hoverable?: boolean;
  padded?: boolean;
}

export function Card({
  className,
  hoverable = false,
  padded = true,
  ...props
}: CardProps) {
  return (
    <div
      className={cn(
        "rounded-(--radius-lg) bg-(--color-surface-default) shadow-(--shadow-cute-sm) border border-(--color-border-subtle)",
        padded && "p-5",
        hoverable &&
          "transition-all duration-200 hover:-translate-y-1 hover:shadow-(--shadow-cute-md) hover:border-(--color-brand-200)",
        className
      )}
      {...props}
    />
  );
}