/**
 * @deprecated Use `Tag` from `@material-hu/components/composed-components/Tag` (for labels with text/icons)
 * or `Chip` from `@material-hu/mui/Chip` (for selectable states). Choose based on consumer context.
 * API difference: local `color` prop accepts a hex string or theme palette key — map to Hugo's `variant`/`color` props.
 */
import { FC } from 'react';

import Chip, { ChipProps } from '@material-hu/mui/Chip';

type Props = Omit<ChipProps, 'children' | 'color' | 'label'> & {
  color?: string;
  children: ChipProps['label'];
};

const Label: FC<Props> = ({ color = 'primary', children, sx, ...props }) => (
  <Chip
    {...props}
    label={children}
    sx={{
      backgroundColor: theme => theme.palette[color]?.main || color,
      color: 'black',
      ...sx,
    }}
  />
);

export default Label;