import { type FC } from 'react';

import Divider from '@material-hu/mui/Divider';
import Skeleton from '@material-hu/mui/Skeleton';
import Stack from '@material-hu/mui/Stack';
import Typography from '@material-hu/mui/Typography';

import { useLokaliseTranslation } from 'src/utils/i18n';

type Props = {
  isAgentSide: boolean;
};

const InformationSkeleton: FC<Props> = ({ isAgentSide }) => {
  const { t } = useLokaliseTranslation('service_management');
  return (
    <Stack
      sx={{
        flexDirection: 'row',
        gap: 3,
        height: '100%',
        alignItems: 'center',
      }}
    >
      <Stack>
        <Typography
          variant="body2"
          color="secondary"
        >
          {t('CREATION_DATE')}
        </Typography>
        <Skeleton
          width={112}
          height={22}
        />
      </Stack>
      <Divider orientation="vertical" />
      {isAgentSide && (
        <>
          <Stack>
            <Typography
              variant="body2"
              color="secondary"
            >
              {t('REQUESTER')}
            </Typography>
            <Skeleton
              width={112}
              height={22}
            />
          </Stack>
          <Divider orientation="vertical" />
        </>
      )}
      <Stack>
        <Typography
          variant="body2"
          color="secondary"
        >
          {t('AGENT')}
        </Typography>
        <Skeleton
          width={112}
          height={22}
        />
      </Stack>
    </Stack>
  );
};

export default InformationSkeleton;
