import { type FC } from 'react';

import { Skeleton as MuiSkeleton, useTheme } from '@mui/material';

import { getBorderRadius } from './constants';
import { type SkeletonProps } from './types';

const Skeleton: FC<SkeletonProps> = ({
  isLoading = true,
  variant = 'rounded', // Safer default than the MUI default 'text' which is not very useful beyond single lines of text (see variant definition at https://mui.com/material-ui/react-skeleton/#variants)
  sx,
  ...skeletonProps
}) => {
  const theme = useTheme();
  return isLoading ? (
    <MuiSkeleton
      animation={'wave'}
      sx={{
        bgcolor: theme.palette.new.background.elements.grey,
        borderRadius: getBorderRadius(variant, theme),
        ...sx,
      }}
      variant={variant}
      {...skeletonProps}
    />
  ) : (
    <>{skeletonProps?.children}</>
  );
};

export type { SkeletonProps };

export default Skeleton;