import React from 'react';
import { Box, Grid, GridItem, Icon, Text } from '@nova-hf/ui';

const info: string[] = [
  'Endalaus símtöl og SMS',
  '5 GB og endalaus símtöl í 40 löndum',
  'Nova appið',
  '5G Hraði',
  'NovaTV',
];

type MobileSubscriptionInfoProps = {
  monthlyPrice: string;
};
const MobileSubscriptionInfo = ({ monthlyPrice }: MobileSubscriptionInfoProps) => {
  return (
    <Box paddingLeft={3} marginLeft="0.5" width="100%">
      <Grid gridTemplate={2} rowGap={2} columnGap={2}>
        {info.map((item, i) => {
          return (
            <GridItem key={item} gridColumn={{ sm: i === info.length - 1 ? 'span1' : 'span2' }}>
              <Box display="inline-flex" gap="0.5" width="100%" alignItems="center">
                <Icon icon="checkMark" color="grey800" size={16} />
                <Text variant="pSmallRegular" color="grey600">
                  {item}
                </Text>
              </Box>
            </GridItem>
          );
        })}
        <GridItem gridColumn={{ sm: 'span1' }}>
          <Box display="flex" justifyContent="flex-end" width="100%">
            <Text variant="pMediumBold" color="pink">
              {monthlyPrice}
            </Text>
            <Text variant="pMediumRegular" color="grey600">
              /mán
            </Text>
          </Box>
        </GridItem>
      </Grid>
    </Box>
  );
};

export default MobileSubscriptionInfo;