import { Grid, GridCol, Group, Stack, Title, Text } from '@mantine/core';
import UrlCardSkeleton from '@/features/cards/components/urlCard/Skeleton.UrlCard';
import { MdOutlineEmojiNature } from 'react-icons/md';
import { LinkButton } from '@/components/link/MantineLink';

export default function DiscoverOnSembleSkeleton() {
  return (
    <Stack>
      <Group justify="space-between">
        <Stack gap={0}>
          <Group gap="xs">
            <MdOutlineEmojiNature size={22} />
            <Title order={2}>Discover on Semble</Title>
          </Group>
          <Text fw={500} fz={'lg'}>
            Recommendations based on your activity
          </Text>
        </Stack>
        <LinkButton variant="light" color="blue" href={'/explore'}>
          Explore
        </LinkButton>
      </Group>

      <Grid gap="xs">
        {Array.from({ length: 3 }).map((_, i) => (
          <GridCol key={i} span={{ base: 12, sm: 4 }}>
            <UrlCardSkeleton />
          </GridCol>
        ))}
      </Grid>
    </Stack>
  );
}
