import { FC } from 'react';

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

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

import useHuGoTheme from 'src/hooks/useHuGoTheme';

const PostAddSkeleton: FC = () => {
  const HuGoThemeProvider = useHuGoTheme();

  return (
    <HuGoThemeProvider>
      <HuCardContainer fullWidth>
        <Box>
          {/* Header section with avatar and user info */}
          <Box
            sx={{
              display: { xs: 'block', sm: 'flex' },
              justifyContent: 'space-between',
              alignItems: 'center',
              mb: 1,
            }}
          >
            <Stack
              sx={{
                flexDirection: 'row',
                alignItems: 'center',
                gap: 1.5,
                mb: { xs: 2, sm: 0 },
              }}
            >
              <HuSkeleton
                variant="circular"
                height={40}
                width={40}
              />
              <Stack>
                <HuSkeleton
                  variant="text"
                  height={30}
                  width={120}
                />
                <HuSkeleton
                  variant="rectangular"
                  height={24}
                  width={100}
                  sx={{ borderRadius: 3 }}
                />
              </Stack>
            </Stack>
            <Box
              sx={{
                display: 'flex',
                flexDirection: { xs: 'row', sm: 'column' },
                justifyContent: 'space-between',
                alignItems: { xs: 'center', sm: 'end' },
                gap: { xs: 0, sm: 1 },
              }}
            >
              <HuSkeleton
                width={80}
                variant="rectangular"
                sx={{ borderRadius: 0.5, height: { xs: 24, sm: 16 } }}
              />
              <HuSkeleton
                width={60}
                variant="rectangular"
                sx={{ borderRadius: 0.5, height: { xs: 24, sm: 16 } }}
              />
            </Box>
          </Box>

          {/* Text input area */}
          <Box sx={{ mb: 1 }}>
            <HuSkeleton
              variant="rectangular"
              height={60}
              width="100%"
              sx={{ borderRadius: 1 }}
            />
          </Box>

          {/* Action buttons section */}
          <Stack
            sx={{
              flexDirection: 'row',
              justifyContent: 'space-between',
              alignItems: 'center',
              width: '100%',
              pt: 1.5,
            }}
          >
            <Stack
              sx={{
                flexDirection: 'row',
                gap: 1,
                alignItems: 'center',
              }}
            >
              <HuSkeleton
                variant="circular"
                height={32}
                width={32}
              />
              <HuSkeleton
                variant="circular"
                height={32}
                width={32}
              />
              <HuSkeleton
                variant="circular"
                height={32}
                width={32}
              />
              <HuSkeleton
                variant="circular"
                height={32}
                width={32}
              />
            </Stack>
            <Stack
              sx={{
                flexDirection: 'row',
                gap: 1,
                alignItems: 'center',
              }}
            >
              <HuSkeleton
                variant="rectangular"
                height={40}
                width={100}
                sx={{ borderRadius: 1 }}
              />
              <HuSkeleton
                variant="rectangular"
                height={40}
                width={80}
                sx={{ borderRadius: 1 }}
              />
            </Stack>
          </Stack>
        </Box>
      </HuCardContainer>
    </HuGoThemeProvider>
  );
};

export default PostAddSkeleton;