import { FC } from 'react';

import Box from '@material-hu/mui/Box';
import Card from '@material-hu/mui/Card';
import CardContent from '@material-hu/mui/CardContent';
import Divider from '@material-hu/mui/Divider';
import Stack from '@material-hu/mui/Stack';

import HuSkeleton from '@material-hu/components/design-system/Skeleton';

const NewsCardSkeleton: FC = () => {
  return (
    <Card
      variant="outlined"
      sx={{
        borderColor: theme => theme.palette.new.border.neutral.default,
        borderRadius: 2,
        overflow: 'hidden',
      }}
    >
      <Box sx={{ aspectRatio: '11 / 3.5' }}>
        <HuSkeleton sx={{ width: '100%', height: '100%', borderRadius: 0 }} />
      </Box>

      {/* Title + time */}
      <CardContent sx={{ px: 2, pt: 2, pb: 1.5 }}>
        <HuSkeleton
          height="20px"
          width="90%"
          sx={{ mb: 0.5 }}
        />
        <HuSkeleton
          height="20px"
          width="60%"
          sx={{ mb: 1 }}
        />
        <HuSkeleton
          height="14px"
          width="30%"
        />
      </CardContent>

      {/* Topic chips */}
      <Stack
        flexDirection="row"
        sx={{ flexWrap: 'wrap', gap: 1, px: 2 }}
      >
        <HuSkeleton
          height="24px"
          width="64px"
          sx={{ borderRadius: '12px' }}
        />
        <HuSkeleton
          height="24px"
          width="80px"
          sx={{ borderRadius: '12px' }}
        />
      </Stack>

      {/* Comment bar */}
      <Divider sx={{ mt: 2 }} />
      <Stack
        flexDirection="row"
        alignItems="center"
        justifyContent="space-between"
        sx={{ px: 2, py: 1.5 }}
      >
        <HuSkeleton
          height="18px"
          width="80px"
        />
        <HuSkeleton
          height="14px"
          width="60px"
        />
      </Stack>
    </Card>
  );
};

export default NewsCardSkeleton;