import React from 'react';

import { Container } from '@cleartrip/ct-design-container';
import { DottedLoader } from '@cleartrip/ct-design-dotted-loader';
import { Typography } from '@cleartrip/ct-design-typography';

import { IGvListItem } from '../../type';
import { gvListItemStaticStyles } from './style';

const GVListItem: React.FC<IGvListItem> = ({ amountRedeemed, gvCode, prefixIcon, primaryCTA }) => {
  const { label, onClick, isLoading } = primaryCTA || {};

  return (
    <Container
      styleConfig={{
        root: [gvListItemStaticStyles.horizontal, gvListItemStaticStyles.smallBox],
      }}
    >
      {prefixIcon}
      <Container>
        <Typography variant='B1'>{gvCode}</Typography>
        <Typography variant='P3' color='subheading'>
          {amountRedeemed}
        </Typography>
        <Container styleConfig={{ root: [gvListItemStaticStyles.btnWrapper] }}>
          {isLoading ? (
            <DottedLoader styleConfig={{ root: [gvListItemStaticStyles.dottedLoader] }} />
          ) : (
            <Typography variant='L2' color='warning' isClickable onClick={onClick}>
              {label}
            </Typography>
          )}
        </Container>
      </Container>
    </Container>
  );
};

export default GVListItem;