/* eslint-disable react/prop-types */
import React from 'react';
import LazyImage from '~hooks/lazy-image';
import { getTeamLogo } from '../../../../helpers/common';
import Link from '~hooks/link';
import styles from './event-card.module.scss';

export const TeamDefImg = ({ alt = '' }) => (
  <img alt={alt} src="../../../../../images/default.svg" width={136} height={136} />
);
export default function index({ item }) {
  const { event } = item.relation;

  // eslint-disable-next-line no-shadow
  const team = (team) => (
    <div>
      <LazyImage
        src={getTeamLogo(team)}
        alt={team.name}
        width={30}
        height={30}
        loading="eager"
        defaultImg={<TeamDefImg alt={team.name} />}
      />
      <p>{team.name}</p>
    </div>
  );

  return (
    <Link to={item.path}>
      <div className={styles.container}>
        {team(event.home_team)}
        {team(event.away_team)}
      </div>
    </Link>
  );
}
