import React from 'react';
import { Box, Grid, GridItem, Icon, IconType, Pill, SecondaryButton, Text } from '@nova-hf/ui';
import { MainColorType } from '@nova-hf/ui/umd/ts/src/styles/vars.css';
import { SecondaryButtonProps } from '@nova-hf/ui/umd/ts/src/buttons/SecondaryButton/SecondaryButton';

export type BoxItem = {
  key: number;
  title: string;
  value: string;
  icon: string;
};

type ContractsHeaderProps = {
  title: string;
  pillText?: string;
  color?: MainColorType;
  button?: SecondaryButtonProps;
  items?: BoxItem[];
};

const ContractsHeader = ({
  color = 'pink',
  title,
  button,
  items,
  pillText,
}: ContractsHeaderProps) => {
  return (
    <Box marginBottom={2}>
      <Box
        display="flex"
        flexDirection="row"
        justifyContent="space-between"
        alignItems="center"
        marginBottom={5}
      >
        <Box gap={2} display="flex" flexDirection="row" alignItems="center">
          <Text variant="h6">{title}</Text>
          {pillText && <Pill size="large" color={color} text={pillText} />}
        </Box>
        {button && <SecondaryButton colorScheme={color} {...button} />}
      </Box>
      {items && (
        <Grid gridTemplate={[4, 8, 10]} rowGap={{ sm: 3, lg: 3 }}>
          {items
            .sort((a, b) => {
              return a.key > b.key ? 1 : -1;
            })
            .map(({ key, title, value, icon }) => (
              <GridItem key={key} gridColumn={{ sm: 'span4', lg: 'span3', xl: 'span2' }}>
                <InfoCard icon={icon as IconType} title={title} info={value} />
              </GridItem>
            ))}
        </Grid>
      )}
    </Box>
  );
};

type InfoCardProps = {
  icon: IconType;
  title: string;
  info: string;
};
const InfoCard = ({ icon, title, info }: InfoCardProps) => (
  <Box
    display="flex"
    flexGrow={1}
    justifyContent="flex-start"
    alignItems="center"
    backgroundColor="white"
    width="100%"
    height="100%"
    paddingX={2}
    paddingY={{ sm: 0, lg: 3 }}
    minHeight={12}
  >
    <Icon icon={icon} color="orange" />
    <Box display="flex" flexDirection="column" justifyContent="center" marginLeft={3}>
      <Box>
        <Text variant="eyebrowMedium" color="grey500">
          {title}
        </Text>
      </Box>
      <Text variant="subtitleBold">{info}</Text>
    </Box>
  </Box>
);

export default ContractsHeader;