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

const TimeTrackSkeleton = () => (
  <CardContainer fullWidth>
    <Stack sx={{ gap: 2 }}>
      <Stack
        sx={{
          flexDirection: 'row',
          alignItems: 'center',
          justifyContent: 'space-between',
          gap: 2,
          p: theme => theme.spacing(2),
          borderRadius: theme => theme.shape.borderRadiusM,
          backgroundColor: ({ palette }) =>
            palette.new.background.layout.default,
        }}
      >
        <Stack sx={{ gap: 0.5 }}>
          <Skeleton
            width={100}
            height={16}
            animation="wave"
          />
          <Stack
            sx={{ flexDirection: 'row', alignItems: 'baseline', gap: 0.5 }}
          >
            <Skeleton
              width={120}
              height={40}
              animation="wave"
            />
            <Skeleton
              width={24}
              height={20}
              animation="wave"
            />
          </Stack>
        </Stack>
        <Skeleton
          variant="rounded"
          width={110}
          height={40}
          animation="wave"
        />
      </Stack>

      <Stack sx={{ flexDirection: 'row', gap: 3 }}>
        <Skeleton
          variant="rounded"
          width={120}
          height={28}
          animation="wave"
        />
        <Skeleton
          variant="rounded"
          width={120}
          height={28}
          animation="wave"
        />
      </Stack>
    </Stack>
  </CardContainer>
);

export default TimeTrackSkeleton;
