/** @jsx jsx */
import { jsx, Text, Flex, Link as ThemeLink, Container } from 'theme-ui';
import { Icon } from '@makerdao/dai-ui-icons';
import Banner from '@components/Banner';
import { banner as bannerJson } from '../data/banner.json';

const Banners = ({ bannerData }) => {
  const [changelog] = bannerData || bannerJson;

  return (
    <Banner
      content={
        <Container>
          <ThemeLink href={changelog.url} target="_blank">
            <Flex
              sx={{
                width: '100%',
                justifyContent: 'space-between',
              }}
            >
              <Text
                sx={{
                  fontWeight: 'body',
                  color: 'onBackgroundMuted',
                  fontSize: 2,
                  '& strong': { color: 'text', px: 1, fontWeight: 'body' },
                  '& p': {
                    m: 0,
                  },
                }}
              >
                {changelog.text}
              </Text>
              <Flex sx={{ alignItems: 'center', justifyContent: 'flex-end', width: '33%' }}>
                <Icon color="text" name="increase"></Icon>
                <Text sx={{ color: 'text', pl: 2, fontWeight: 'body' }}>{changelog.linkText}</Text>
              </Flex>
            </Flex>
          </ThemeLink>
        </Container>
      }
    />
  );
};

export default Banners;