import React from 'react';

import { HStack, Stack, Text } from 'soapbox/components/ui';

import { generateText, randomIntFromInterval } from '../utils';

const PlaceholderGroupDiscover = () => {
  const groupNameLength = randomIntFromInterval(12, 20);

  return (
    <Stack space={2} className='animate-pulse'>
      <Stack className='aspect-w-10 aspect-h-7 h-full w-full overflow-hidden rounded-lg'>
        {/* Group Cover Image */}
        <div className='absolute inset-0 rounded-t-lg bg-gray-300 object-cover dark:bg-gray-800' />

        <Stack justifyContent='end' className='z-10 p-4 text-white' space={3}>
          {/* Group Avatar */}
          <div className='h-11 w-11 rounded-full bg-gray-500 dark:bg-gray-700 dark:ring-primary-900' />

          {/* Group Info */}
          <Stack space={1} className='text-gray-500 dark:text-gray-700'>
            <Text theme='inherit' weight='bold' truncate>{generateText(groupNameLength)}</Text>

            <HStack space={3} wrap>
              <Text tag='span' theme='inherit'>{generateText(6)}</Text>
              <Text tag='span' theme='inherit'>{generateText(6)}</Text>
            </HStack>
          </Stack>
        </Stack>
      </Stack>

      {/* Join Group Button */}
      <div className='h-10 w-full rounded-full bg-gray-300 dark:bg-gray-800' />
    </Stack>
  );
};

export default PlaceholderGroupDiscover;