/* eslint-disable react/prop-types */
/* eslint-disable import/no-extraneous-dependencies */
import React from 'react';
import LazyImage from 'gatsby-core-theme/src/hooks/lazy-image';
import { getTeamLogo } from 'gatsby-sports-theme/src/helpers/common';
import PropTypes from 'prop-types';
import Link from 'gatsby-core-theme/src/hooks/link';
import styles from './scheduleEvent.module.scss';

export default function ScheduleEvent({ data }) {
  return (
    <div className={styles.event}>
      <h4>{data.name}</h4>
      <div>
        {data?.events?.map((event) => (
          <Link to={event?.path}>
            <div>{event?.date?.time}</div>
            <div>
              <span>{event.home_team.name}</span>
              <LazyImage
                width={30}
                height={30}
                alt={event.home_team.name}
                src={getTeamLogo(event.home_team)}
              />
            </div>
            <div>vs</div>
            <div>
              <LazyImage
                src={getTeamLogo(event.away_team)}
                width={30}
                height={30}
                alt={event.away_team.name}
              />
              <span>{event.away_team.name}</span>
            </div>
          </Link>
        ))}
      </div>
    </div>
  );
}

ScheduleEvent.propTypes = {
  data: PropTypes.shape({
    name: PropTypes.string,
    events: PropTypes.shape({}),
  }),
};
