import { useTranslation } from 'react-i18next';

import { IconInfoCircle } from '@material-hu/icons/tabler';
import { useTheme } from '@material-hu/mui/index';
import Stack from '@material-hu/mui/Stack';

import Avatar from '@material-hu/components/design-system/Avatar';
import Title, { TitleProps } from '@material-hu/components/design-system/Title';

type NoResultsLabelProps = {
  slotProps?: {
    title?: TitleProps;
  };
};

export const NoResultsLabel = ({ slotProps }: NoResultsLabelProps) => {
  const { t } = useTranslation(['general']);
  const theme = useTheme();

  return (
    <Stack sx={{ alignItems: 'center', gap: 2 }}>
      <Avatar
        Icon={IconInfoCircle}
        sx={{
          backgroundColor: theme.palette.new.background.layout.default,
        }}
      />
      <Title
        {...slotProps?.title}
        slotProps={{
          title: {
            sx: {
              color: theme.palette.new.text.neutral.default,
              ...slotProps?.title?.sx,
            },
          },
          ...slotProps?.title?.slotProps,
        }}
        title={slotProps?.title?.title || t(`general:empty_search_result`)}
      />
    </Stack>
  );
};