import { ReactNode } from 'react';

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

import CardContainer from '@material-hu/components/design-system/CardContainer';

type SearchEmptyStateProps = {
  label: ReactNode;
};

export const SearchEmptyState = ({ label }: SearchEmptyStateProps) => (
  <CardContainer
    sx={{ mt: 2 }}
    fullWidth
  >
    <Stack
      alignItems="center"
      sx={{ gap: 2 }}
    >
      <Box
        sx={theme => ({
          borderRadius: '50%',
          backgroundColor: theme.palette.new.background.elements.brand,
          width: 40,
          height: 40,
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'center',
          color: theme.palette.new.text.neutral.default,
        })}
      >
        <IconInfoCircle size={24} />
      </Box>
      <Typography
        variant="globalM"
        fontWeight="fontWeightSemiBold"
        sx={theme => ({
          color: theme.palette.new.text.neutral.default,
          textAlign: 'center',
        })}
      >
        {label}
      </Typography>
    </Stack>
  </CardContainer>
);