import Tooltip from '@design-system/Tooltip';
import { Stack, Typography, useFormControl, useTheme } from '@mui/material';
import { IconInfoCircle } from '@tabler/icons-react';

import { type CustomLabelProps } from './types';

const CustomLabel = ({
  id,
  label,
  success,
  labelTooltip,
  slotProps,
}: CustomLabelProps) => {
  const { error, disabled } = useFormControl() || {};
  const theme = useTheme();

  if (!label) return null;

  const getLabelColor = () => {
    if (error) {
      return theme.palette.new.text.feedback.error;
    }
    if (success) {
      return theme.palette.new.text.feedback.success;
    }
    if (disabled) {
      return theme.palette.new.text.neutral.disabled;
    }
    return theme.palette.new.text.neutral.default;
  };

  return (
    <Stack
      className="CustomLabel-root"
      sx={{
        flexDirection: 'row',
        alignItems: 'center',
        gap: 0.5,
        mb: 0.5,
      }}
    >
      <Typography
        className="CustomLabel-label"
        id={id}
        variant="globalS"
        fontWeight="fontWeightSemiBold"
        sx={{ color: getLabelColor() }}
      >
        {label}
      </Typography>
      {labelTooltip && (
        <Tooltip
          title={labelTooltip}
          {...slotProps?.labelTooltip}
        >
          <IconInfoCircle size={13} />
        </Tooltip>
      )}
    </Stack>
  );
};

export type { CustomLabelProps };

export default CustomLabel;