import React from "react";
import { twJoin } from "tailwind-merge";
import { InputAdornment } from "@mui/material";

import { Icon, type IconProps } from "../icon/Icon";

export const IconContainer = ({
  icon,
  disabled = false,
}: {
  icon: IconProps["name"];
  disabled?: boolean;
}) => (
  <InputAdornment
    position="end"
    classes={{
      root: twJoin(
        "cursor-default m-0 h-20",
        disabled ? "text-N60" : "text-N80"
      ),
    }}
  >
    <Icon name={icon} size="20" weight="medium" />
  </InputAdornment>
);
