import List, {
  type ListItem,
  type ListProps,
} from '@components/atoms/lists/list';
import Card, { type CardProps } from '@components/molecules/layout/card';
import { FC } from 'react';
import styles from './cards-list.module.scss';

export type CardsListItem = Omit<
  CardProps,
  'className' | 'coverFit' | 'titleLevel'
> & {
  id: string;
};

export type CardsListProps = {
  /**
   * The cover fit.
   */
  coverFit?: CardProps['coverFit'];
  /**
   * The cards data.
   */
  items: CardsListItem[];
  /**
   * The list kind. Either ordered or unordered.
   */
  kind?: ListProps['kind'];
  /**
   * The title level (hn).
   */
  titleLevel: CardProps['titleLevel'];
};

/**
 * CardsList component
 *
 * Return a list of Card components.
 */
const CardsList: FC<CardsListProps> = ({
  coverFit,
  items,
  kind = 'unordered',
  titleLevel,
}) => {
  const kindModifier = `wrapper--${kind}`;

  /**
   * Format the cards data to be used by the List component.
   *
   * @param {CardsListItem[]} cards - An array of card data.
   * @returns {ListItem[]} The formatted cards data.
   */
  const getCards = (cards: CardsListItem[]): ListItem[] => {
    return cards.map(({ id, ...card }) => {
      return {
        id,
        value: (
          <Card
            key={id}
            coverFit={coverFit}
            titleLevel={titleLevel}
            className={styles.card}
            {...card}
          />
        ),
      };
    });
  };

  return (
    <List
      items={getCards(items)}
      withMargin={false}
      className={`${styles.wrapper} ${styles[kindModifier]}`}
    />
  );
};

export default CardsList;
in.js?id=2cc983064467fdef5630eeabc1a87d454afdb58d'>tree</a><a href='/www.armandphilippot.com/commit/public/prism/prism-n4js.min.js?id=2cc983064467fdef5630eeabc1a87d454afdb58d'>commit</a><a href='/www.armandphilippot.com/diff/public/prism/prism-n4js.min.js?id=2cc983064467fdef5630eeabc1a87d454afdb58d'>diff</a><a href='/www.armandphilippot.com/stats/public/prism/prism-n4js.min.js'>stats</a></td><td class='form'><form class='right' method='get' action='/www.armandphilippot.com/log/public/prism/prism-n4js.min.js'>
<input type='hidden' name='id' value='2cc983064467fdef5630eeabc1a87d454afdb58d'/><select name='qt'>
<option value='grep'>log msg</option>
<option value='author'>author</option>
<option value='committer'>committer</option>
<option value='range'>range</option>
</select>
<input class='txt' type='search' size='10' name='q' value=''/>
<input type='submit' value='search'/>
</form>
</td></tr></table>
<div class='path'>path: <a href='/www.armandphilippot.com/tree/?id=2cc983064467fdef5630eeabc1a87d454afdb58d'>root</a>/<a href='/www.armandphilippot.com/tree/public?id=2cc983064467fdef5630eeabc1a87d454afdb58d'>public</a>/<a href='/www.armandphilippot.com/tree/public/prism?id=2cc983064467fdef5630eeabc1a87d454afdb58d'>prism</a>/<a href='/www.armandphilippot.com/tree/public/prism/prism-n4js.min.js?id=2cc983064467fdef5630eeabc1a87d454afdb58d'>prism-n4js.min.js</a></div><div class='content'>blob: a1af08cb32f9905f37fab3a62dc4113a0dfa8e98 (<a href='/www.armandphilippot.com/plain/public/prism/prism-n4js.min.js?id=2cc983064467fdef5630eeabc1a87d454afdb58d'>plain</a>)
<table summary='blob content' class='blob'>
<tr><td class='linenumbers'><pre><a id='n1' href='#n1'>1</a>
<a id='n2' href='#n2'>2</a>
<a id='n3' href='#n3'>3</a>
<a id='n4' href='#n4'>4</a>
<a id='n5' href='#n5'>5</a>
<a id='n6' href='#n6'>6</a>
<a id='n7' href='#n7'>7</a>
<a id='n8' href='#n8'>8</a>
</pre></td>
<td class='lines'><pre><code>