import { VariantProps, cva } from 'class-variance-authority';
import { DefaultCard } from './DefaultCard/defaultCard';
import { Section } from '../../molecules/Section';
import React, { FC } from 'react';
import { cssMerge } from '../../utils/cssMerge';

export type ValidCols = 1 | 2 | 3;

interface CardDeckProps {
  cards: DefaultCard[];
  numCols?: ValidCols;
  featured?: boolean;
}

const sectionWrapper = cva(['tw-grid', 'tw-gap-7'], {
  variants: {
    numCols: {
      1: ['tw-grid-cols-1'],
      2: ['tw-grid-cols-1', 'md:tw-grid-cols-2'],
      3: ['tw-grid-cols-1', 'md:tw-grid-cols-2', 'lg:tw-grid-cols-3'],
    },
  },
});

export const CardDeck: FC<CardDeckProps & VariantProps<typeof sectionWrapper>> = ({ cards, numCols, featured }) => {
  if (!cards) {
    return null;
  }
  const featuredCard = featured && cards[0];
  return (
    <Section>
      {featuredCard && <DefaultCard isFeatured={true} {...featuredCard} />}
      <div className={cssMerge(sectionWrapper({ numCols }))}>
        {!!cards.length &&
          cards.map((card, index) => {
            const hiddenOnDesktop = featured && index === 0;
            return <DefaultCard key={index} hiddenOnDesktop={hiddenOnDesktop} {...card} />;
          })}
      </div>
    </Section>
  );
};
