import clsx from "clsx";

interface CardProps {
  children: React.ReactNode;
  color?: "gradient" | "darker" | "yellow" | "zinc";
  className?: string | undefined;
}

export function Card({ children, color = "gradient", className }: CardProps) {
  const colorVariants = {
    gradient: "bg-linear-to-tr from-green-secondary to-yellow-primary",
    darker: "bg-green-primary text-white",
    yellow: "text-green-primary bg-yellow-tertiary",
    zinc: "text-white bg-zinc-900",
  };

  return (
    <div
      className={clsx(
        "lg:rounded-2xl",
        "lg:drop-shadow-sm",
        "p-3 lg:p-12",
        colorVariants[color],
        className,
      )}
    >
      {children}
    </div>
  );
}
