import React from "react";
import classNames from "classnames";
export interface ColorSwatchProps {
  color: string;
  variants?: "collection" | "product";
  active?: boolean;
  className?: string;
  handle?: string;
  onClick?: () => void;
  isWhite?: any;
}

export const ColorSwatch: React.FC<ColorSwatchProps> = ({
  color,
  variants = "collection",
  active,
  className,
  handle,
  onClick,
  isWhite,
}) => {
  const classes = classNames({
    "": true,
    "w-[14px] h-[14px] 2xl:w-[0.972vw] 2xl:h-[0.972vw]":
      variants === "collection",
    "w-[18px] h-[18px] 2xl:w-[1.250vw] 2xl:h-[1.250vw]": variants === "product",
  });
  const styles = {
    popup: {
      backgroundColor: color,
      border: isWhite ? "1px solid #B8B8B8" : "none",
    },
  };
  return (
    <div>
      {handle ? (
        <a href={`/products/${handle}`}>
          <div
            className={`p-[3px] 2xl:p-[0.208vw] 2xl:mr-[0.069vw] rounded-full cursor-pointer ${
              active
                ? `ring-1 2xl:ring-[0.069vw] ring-graphite`
                : "ring-gray-200"
            } hover:ring-1 2xl:hover:ring-[0.069vw]  transition ${
              className || ""
            }`}
          >
            <div
              className={`rounded-full ${classes}`}
              style={styles.popup}
            ></div>
          </div>
        </a>
      ) : (
        <div
          onClick={onClick}
          className={`p-[3px] 2xl:p-[0.208vw] mr-1 2xl:mr-[0.069vw] rounded-full cursor-pointer mb-[1px] ${
            active ? `ring-1 2xl:ring-[0.069vw] ring-graphite` : "ring-gray-200"
          } hover:ring-1 2xl:hover:ring-[0.069vw]  transition ${
            className || ""
          }`}
        >
          <div className={`rounded-full ${classes}`} style={styles.popup}></div>
        </div>
      )}
    </div>
  );
};