/* eslint-disable react/no-children-prop */
import React from 'react';
import Tabs from 'gatsby-core-theme/src/hooks/tabs';
import PropTypes from 'prop-types';
import Event from '../../atoms/scheduleEvents';

export default function Schedule({ page }) {
  const schedule = Object.values(page?.relation?.schedule);

  const showTabs = schedule.length > 1;
  const getLabel = (item) => `${item?.date?.day} ${item?.date?.day_number}. ${item?.date?.month}`;

  const content = schedule.map((res) => (
    <div label={getLabel(res)}>
      {Object.values(res?.tournaments)?.map((data) => (
        <Event data={data} />
      ))}
    </div>
  ));
  return showTabs ? <Tabs tabsAlign="left" children={content} label={content} /> : content;
}

Schedule.propTypes = {
  page: PropTypes.shape({
    relation: PropTypes.shape({
      schedule: PropTypes.shape({}),
    }),
  }),
};
