import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';
import { useTheme } from '@material-hu/mui/index';

type DayBadgeProps = {
  weekday: string;
  day: string;
  isToday: boolean;
};

const DayBadge = ({ weekday, day, isToday }: DayBadgeProps) => {
  const { palette } = useTheme();
  return (
    <Stack
      sx={{
        backgroundColor: isToday
          ? palette.new.background.layout.brand
          : palette.new.background.layout.tertiary,
        borderRadius: 1,
        border: `1px solid ${palette.new.border.neutral.default}`,
        alignItems: 'center',
        justifyContent: 'center',
        minWidth: 48,
        px: 1,
        py: 0.5,
        mr: 2,
        color: isToday
          ? palette.new.action.button.text.tertiary.default
          : palette.new.text.neutral.default,
      }}
    >
      <Typography
        variant="globalXS"
        sx={{
          color: 'inherit',
          fontWeight: 'fontWeightSemiBold',
          lineHeight: 1.2,
        }}
      >
        {weekday}
      </Typography>
      <Typography
        variant="globalL"
        sx={{
          color: 'inherit',
          fontWeight: 'fontWeightSemiBold',
          lineHeight: 1.2,
        }}
      >
        {day}
      </Typography>
    </Stack>
  );
};

export default DayBadge;