import { CookieIcon } from 'lucide-react'
import { Box, Container, HStack, Stack } from 'styled-system/jsx'
import { Button } from '~/components/ui/button'
import { Icon } from '~/components/ui/icon'
import { Link } from '~/components/ui/link'
import { Text } from '~/components/ui/text'

export const Example = () => {
  return (
    <Box pb={{ base: '12', md: '24' }}>
      <Box borderBottomWidth="1px" bg="bg.default">
        <Container py={{ base: '4', md: '3.5' }} px="4">
          <Stack
            gap="4"
            justifyContent={{ base: 'start', md: 'space-between' }}
            flexDirection={{ base: 'column', md: 'row' }}
          >
            <Stack
              direction={{ base: 'column', md: 'row' }}
              alignItems={{ base: 'start', md: 'center' }}
              gap={{ base: '1', md: '2' }}
            >
              <HStack gap="2">
                <Icon size="md">
                  <CookieIcon />
                </Icon>
                <Text fontWeight="medium" display={{ md: 'none' }}>
                  Cookie Consent
                </Text>
              </HStack>
              <Text color="fg.muted">
                We use third-party cookies in order to personalise your experience. Read our{' '}
                <Link href="#">Cookie Policy</Link>.
              </Text>
            </Stack>
            <HStack gap="3">
              <Button variant="outline" width="full">
                Reject
              </Button>
              <Button width="full">Allow</Button>
            </HStack>
          </Stack>
        </Container>
      </Box>
    </Box>
  )
}
Banners

Banner For Cookies

Banner For Newsletter

Banner With Two Buttons
