import type { HTMLAttributes } from "react";

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

export default function Card({
  padded = true,
  hoverable = false,
  className = "",
  children,
  ...rest
}: Props) {
  return (
    <div
      {...rest}
      className={[
        "glass border border-brand-lines/15 rounded-2xl",
        padded ? "p-4" : "",
        hoverable ? "transition-colors hover:border-brand-accent/40" : "",
        className,
      ].join(" ")}
    >
      {children}
    </div>
  );
}
