import Title from '@design-system/Title';
import { Stack, type Theme, useTheme } from '@mui/material';

import EmptyStateIcon from '../EmptyStateIcon';

import { type EmptyStateProps, EmptyStateVariant } from './types';

const getVariantStyles = (theme: Theme) => ({
  [EmptyStateVariant.DEFAULT]: {},
  [EmptyStateVariant.DASHED]: {
    p: 3,
    border: `1px dashed ${theme.palette.new.border.neutral.default}`,
    borderRadius: 2,
  },
});

const EmptyState = ({
  title,
  description,
  footer,
  hideIcon,
  variant = EmptyStateVariant.DEFAULT,
  slotProps = {},
}: EmptyStateProps) => {
  const theme = useTheme();
  const { root, title: titleProps } = slotProps;
  return (
    <Stack
      {...root}
      sx={{
        alignItems: 'center',
        gap: 1,
        backgroundColor: theme.palette.new.background.elements.default,
        ...getVariantStyles(theme)[variant],
        ...root?.sx,
      }}
    >
      {!hideIcon && <EmptyStateIcon />}
      <Title
        {...titleProps}
        description={description}
        title={title}
        variant="L"
        centered
      />
      {footer}
    </Stack>
  );
};

export default EmptyState;