import Divider from '@material-hu/mui/Divider';
import { useTheme } from '@material-hu/mui/styles';

type CourseDividerProps = {
  position: 'before' | 'after';
  show: boolean;
};

const CourseDivider = ({ position, show }: CourseDividerProps) => {
  const { palette } = useTheme();

  if (!show) return null;

  return (
    <Divider
      sx={{
        position: 'absolute',
        top: position === 'before' ? -10 : undefined,
        bottom: position === 'after' ? -10 : undefined,
        left: 5,
        right: 5,
        zIndex: 10,
        borderColor: palette.ilustrations?.primaryIlus,
        borderWidth: 2,
      }}
    />
  );
};

export default CourseDivider;