import React from "react";

import MuiTab, { TabProps as MuiTabProps } from "@mui/material/Tab";

export type TabProps = Pick<MuiTabProps, "value" | "label" | "icon" | "disabled">;

export const Tab: React.FC<TabProps> = (props) => {
  return (
    <MuiTab
      disableRipple
      iconPosition="start"
      sx={{
        px: 0.5,
        py: 1,
        minWidth: 0,
        minHeight: 0,
        textTransform: "capitalize",
        fontWeight: 500,
        fontVariationSettings: { sm: '"wdth" 100', xs: '"wdth" 75' },
        "> *": {
          fontSize: "1.5em",
        },
      }}
      {...props}
    />
  );
};