import React from "react";
import classNames from "classnames";
import { PRODUCT_ID } from "../../types";
import { Box, BoxProps } from "../Box";
import { ProductIconComply } from "./ProductIconComply";
import { ProductIconDeploy } from "./ProductIconDeploy";
import { ProductIconTrustCenter } from "./ProductIconTrustCenter";
import { bem } from "../../utilities/bem";
import { ProductIconExchange } from "./ProductIconExchange";

const cn = "ProductIcon";

interface ProductIconProps extends BoxProps {
  productId: PRODUCT_ID;
}

interface IconProps {
  className: string;
  focusable: boolean | "true" | "false" | "auto";
  role: string;
}

const iconProps: IconProps = {
  className: bem(cn, { e: "icon" }),
  focusable: "false",
  role: "img",
};

const icon = (productId: PRODUCT_ID) =>
  ({
    exchange: <ProductIconExchange {...iconProps} />,
    comply: <ProductIconComply {...iconProps} />,
    deploy: <ProductIconDeploy {...iconProps} />,
    trustCenter: <ProductIconTrustCenter {...iconProps} />,
  }[productId]);

export const ProductIcon = (props: ProductIconProps) => {
  const { productId, className, ...rest } = props;

  return (
    <Box className={classNames(bem(cn), className)} {...rest}>
      {icon(productId)}
    </Box>
  );
};