import { ReactNode } from "react";

interface CardProps {
  children: ReactNode;
  className?: string;
  padding?: "none" | "sm" | "md" | "lg";
  onClick?: () => void;
}

const paddings = {
  none: "",
  sm: "p-3",
  md: "p-4",
  lg: "p-6",
};

export function Card({ children, className = "", padding = "md", onClick }: CardProps) {
  const base = "bg-white dark:bg-gray-800 rounded-2xl shadow-sm border border-gray-100 dark:border-gray-700";
  const p = paddings[padding];
  const interactive = onClick ? "cursor-pointer hover:shadow-md transition-shadow" : "";
  return (
    <div className={`${base} ${p} ${interactive} ${className}`} onClick={onClick}>
      {children}
    </div>
  );
}
