import React from "react";
import classNames from "classnames";
export interface SizeProps {
  size?: string;
  variants?: "collection" | "product" | "onesize";
  Disabled?: boolean;
  className?: string;
  onClick?: () => void;
}

export const Size: React.FC<SizeProps> = ({
  size = "XL",
  variants = "collection",
  Disabled = false,
  className,
  onClick,
}) => {
  const classes = classNames({
    "": true,
    "rounded 2xl:rounded-[0.278vw] text-body-large 2xl:text-body-large-2xl py-[10px] 2xl:py-[0.694vw] px-[12px] 2xl:px-[0.833vw] hover:bg-quaternary":
      variants === "collection",
    "w-[2.813rem] lg:w-[3.75rem] 2xl:w-[4.167vw] text-body-text lg:text-body-text-lg 2xl:text-body-text-2xl h-40 lg:h-40 2xl:h-40-2xl border rounded 2xl:rounded-[0.278vw] border-warmTone-4":
      variants === "product",
    df: variants === "onesize",
    "text-neutral": Disabled === true,
  });

  return (
    <button onClick={onClick} className={`${classes} ${className} `}>
      {size}
    </button>
  );
};