import classNames from "classnames";
import { StyleColorVariants, StyleColorVariantsMap } from "core/_variants";
import React from "react";

type Props = {
  children: React.ReactNode;
  className?: string;
  variant?: StyleColorVariants;
};

const backgrounds: StyleColorVariantsMap<string> = {
  blue: "bg-blue-500",
  emerald: "bg-emerald-500",
  gray: "bg-gray-800",
  pink: "bg-pink-500",
  purple: "bg-purple-500",
  red: "bg-red-500",
  sky: "bg-sky-500",
  yellow: "bg-yellow-500",
  "dark-coral": "bg-dark-coral-500",
};

/**
 * Card component
 * @param {string|undefined} className Card customization classes
 * @param {React.ReactNode} children Children to paste inside Card component
 * @return {JSX.Element}
 */
export default function Card({ children, className, variant }: Props) {
  return (
    <div
      className={classNames([
        "rounded-lg w-full px-3 py-4",
        {
          [`${backgrounds[variant ?? "blue"]}`]: variant,
        },
        className,
      ])}
    >
      {children}
    </div>
  );
}
