Untitled

// import { getCurrentGoals } from '@/lib/helpers/getCurrentGoals';
import getShortName from '@/lib/helpers/getShortName';
import getSlugify from '@/lib/helpers/getSlugify';
import useFetchHeadToHead from '@/lib/hooks/useFetchHeadToHead';
import Image from 'next/image';
import Link from 'next/link';
import { useState } from 'react';

export default function MatchHead2Head({ matchData }) {
  const [isStarClicked, setIsStarClicked] = useState(false);

  const { headToHeadLoading, headToHeadData } = useFetchHeadToHead(
    matchData?.participants.find((team) => team.meta.location === 'home')?.id,
    matchData?.participants.find((team) => team.meta.location === 'away')?.id
  );

  if (headToHeadLoading) {
    return <>Loading . . . </>;
  }

  const handleButtonClick = (event) => {
    event.preventDefault();
    setIsStarClicked(!isStarClicked);
  };

  function getPreviousEncounters(counters) {
    const previousEncounters = [];

    counters?.forEach((match) => {
      const fixtureId = match?.id;
      const leagueName = match.name;
      const matchTime = match.starting_at;
      const homeTeamName = match.participants[0].name;
      // const scores = getCurrentGoals(match?.scores);
      const homeTeamImage = match.participants[0].image_path;
      const awayTeamName = match.participants[1].name;
      const awayTeamImage = match.participants[1].image_path;
      const matchState = match.state.state;

      const encounter = {
        id: fixtureId,
        league_name: leagueName,
        match_time: matchTime,
        home_team_name: homeTeamName,
        home_team_image: homeTeamImage,
        away_team_name: awayTeamName,
        away_team_image: awayTeamImage,
        match_state: matchState,
        // score: scores,
      };

      previousEncounters.push(encounter);
    });

    return previousEncounters;
  }

  const previousEncounters = getPreviousEncounters(headToHeadData);

  return (
    <div className="max-w-3xl mx-auto">
      <h4 className="font-semibold text-lg skew-y-[0.5deg] my-4">
        Recent Encounters
      </h4>
      {previousEncounters?.map((encounter) => (
        <div key={encounter?.id} className="relative w-full">
          <h4 className="bg-gray-50 p-4 -skew-y-[0deg] ">
            {encounter?.match_time?.split(' ')[0]}
          </h4>
          <Link
            href={`/match/details/${getSlugify(
              encounter?.home_team_name
            )}-vs-${getSlugify(encounter?.home_team_name)}/${encounter?.id}`}
            className="w-full"
          >
            <div className={`h-auto w-full mb-1 bg-gray-200`}>
              <div className={`p-2 grid grid-cols-12 items-center gap-2`}>
                <p className="col-span-1 text-gray-400 text-sm font-semibold">
                  {encounter?.match_state}
                </p>
                <div className="col-span-3 flex items-center">
                  <Image
                    src={encounter?.home_team_image}
                    alt="team one"
                    height={0}
                    width={0}
                    sizes="100vw"
                    className="w-7 h-7 ring-1 ring-primary mr-3 rounded-full"
                  />
                  <h4 className="text-sm font-semibold uppercase">
                    {getShortName(encounter?.home_team_name)}
                  </h4>
                </div>

                <div
                  className={`col-span-3 w-16 h-16 rounded-full flex text-xs bg-primary text-white items-center justify-center mx-auto`}
                >
                  {encounter?.score}
                </div>

                <div className="col-span-3 flex items-center">
                  <Image
                    src={encounter?.away_team_image}
                    alt="team two"
                    height={0}
                    width={0}
                    sizes="100vw"
                    className="w-7 h-7 ring-1 ring-primary mr-3 rounded-full"
                  />
                  <h4 className="text-sm font-semibold uppercase">
                    {getShortName(encounter?.away_team_name)}
                  </h4>
                </div>
              </div>
            </div>
          </Link>
          <button
            className="col-span-2 mx-auto absolute top-20 right-5"
            onClick={handleButtonClick}
          >
            <svg
              className={`w-6 h-6 ${isStarClicked ? 'text-green-500' : ''}`}
              viewBox="0 0 15 15"
              version="1.1"
              id="star"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                id="path4749-2-8-2"
                d="M7.5,0l-2,5h-5l4,3.5l-2,6l5-3.5&#xA;&#x9;l5,3.5l-2-6l4-3.5h-5L7.5,0z"
                fill={`${isStarClicked ? '#f39c12' : '#fffffff'}`}
              />
            </svg>
          </button>
        </div>
      ))}
    </div>
  );
}