import { FC, memo } from "react";
import { PanelLabelProps } from "./interface";
import { applyLabelTipsStyle } from "./style";
import { useTheme } from "@mui/material";

export const PanelLabel: FC<PanelLabelProps> = memo(
  (props: PanelLabelProps) => {
    const { labelDesc, labelName, labelSize = "medium" } = props;
    const theme = useTheme();
    return !labelDesc ? (
      <span css={applyLabelTipsStyle(!!labelDesc, labelSize, theme)}>
        {labelName}
      </span>
    ) : (
      <span css={applyLabelTipsStyle(!!labelDesc, labelSize, theme)}>
        {labelName}
      </span>
    );
  }
);

PanelLabel.displayName = "PanelLabel";
