import type { PageSectionComponent } from '../types';
import type { ShowsSectionProps } from './types';

import Box from '~/src/components/Box';
import { useRegisterNavItem } from '../../components/ItemPageNav';
import ShowList from './ShowList';
import { useResolveShows } from './utils';

const ShowsSection: PageSectionComponent<ShowsSectionProps> = ({
  title,
  items = [],
  geolocation,
  sectionId,
  sectionIndex,
  navTitle = 'Shows',
}) => {
  const shows = useResolveShows(items, geolocation);

  useRegisterNavItem({
    id: sectionId,
    text: navTitle,
    index: sectionIndex,
    skip: !items?.length,
  });

  if (!shows.length) {
    return null;
  }

  return (
    <Box testId="showsSection">
      <ShowList items={shows} title={title} />
    </Box>
  );
};

export default ShowsSection;