import React from 'react';
import { Carousel } from '@nova-hf/ui';
import { SearchHit } from 'typings/graphql';

import { PanelCard } from './PanelCard';

type PanelProps = {
  hits: SearchHit[];
  onClick: (nationalId: string) => void;
};

export const Panel = ({ hits, onClick }: PanelProps) => {
  if (!hits.length) return null;

  return (
    <Carousel hasNavigationButtons={false} childrenToLazyLoadAtATime={4}>
      {hits.map((h) => (
        <PanelCard key={h.id} hit={h} onClick={onClick} />
      ))}
    </Carousel>
  );
};