Untitled

import { xoomBackendUrl } from '@/lib/axios/getAxios';
import getShortName from '@/lib/helpers/getShortName';
import getSlugify from '@/lib/helpers/getSlugify';
import { useSession } from 'next-auth/react';
import Image from 'next/image';
import Link from 'next/link';
import { useState } from 'react';
import toast from 'react-hot-toast';
import BetDroopDown from './BetDroopDown';
import MatchScore from './MatchScore';
import MatchStates2 from './MatchStates2';
import Probability from './Probability';

const MatchCard2 = ({ match, large }) => {
  console.log(match);
  const { data: session } = useSession();
  const [isStarClicked, setIsStarClicked] = useState(false);
  const isFavorite = false;

  const upcomingStatus = [
    'TBA',
    'NS',
    'WO',
    'ABANDONED',
    'CANCELLED',
    'AWARDED',
    'INTERRUPTED',
    'POSTPONED',
  ];
  const isPreviewPage = upcomingStatus.includes(match?.state?.short_name);

  const handleFavoriteClick = async (event, match) => {
    event.preventDefault();
    if (session) {
      const favoriteData = {
        email: session.user?.email,
        key: 'matches',
        item: match,
      };

      try {
        const { data } = await xoomBackendUrl.put(
          '/api/user/favorites',
          favoriteData
        );

        if (data.status) {
          setIsStarClicked(!isStarClicked);
          toast.success('Match added to favorites');
        } else {
          toast.error('Error');
        }
      } catch (error) {
        console.error('Error while adding to favorites:', error);
        toast.error('An error occurred');
      }
    } else {
      toast.error('Please login first');
    }
  };

  const handleRemoveFavorite = async (event, match) => {
    event.preventDefault();
    if (session) {
      const favoriteData = {
        email: session.user?.email,
        key: 'matches',
        item: match,
      };

      try {
        const { data } = await xoomBackendUrl.put(
          '/api/user/favorites/remove',
          favoriteData
        );

        if (data.status) {
          setIsStarClicked(!isStarClicked);
          toast.success('Match removed from favorites');
        } else {
          toast.error('Error');
        }
      } catch (error) {
        console.error('Error while removing from favorites:', error);
        toast.error('An error occurred');
      }
    } else {
      toast.error('Please login first');
    }
  };

  const teamByLocation = (location) =>
    match?.participants?.find((team) => team?.meta?.location === location);

  return (
    <div className="relative ">
      <Link
        className={
          large
            ? 'bg-[#1B2435] grid grid-cols-10 content-center gap-4 my-4 h-16 text-lg '
            : 'bg-[#1B2435] grid grid-cols-10 content-center gap-4 my-2 text-xs'
        }
        href={`/match/${isPreviewPage ? 'preview' : 'details'}/${getSlugify(
          teamByLocation('home')?.name
        )}-vs-${getSlugify(teamByLocation('away')?.name)}/${match?.id}`}
      >
        <MatchScore match={match} />
        <div className="py-1 col-span-4 flex items-center">
          <div>
            <div className="flex justify-between text-gray-400 pb-2">
              <div className="flex gap-2 items-center ">
                <div>
                  <Image
                    src={teamByLocation('home')?.image_path}
                    alt="team one"
                    height={0}
                    width={0}
                    sizes="100vw"
                    className="w-4 h-4"
                  />
                </div>
                <h2>
                  {getShortName(
                    teamByLocation('home')?.name,
                    teamByLocation('home')?.short_code
                  )}
                </h2>
              </div>
            </div>
            <div className="flex justify-between text-gray-400 ">
              <div className="flex gap-2 items-center ">
                <div>
                  <Image
                    src={teamByLocation('away')?.image_path}
                    alt="team two"
                    height={0}
                    width={0}
                    sizes="100vw"
                    className="w-4 h-4"
                  />
                </div>
                <h2>
                  {getShortName(
                    teamByLocation('away')?.name,
                    teamByLocation('away')?.short_code
                  )}
                </h2>
              </div>
            </div>
          </div>
        </div>
        {/* goal section  */}
        <MatchStates2 match={match} />
      </Link>
      {/* analytic & highlight */}
      <div
        className={
          large
            ? 'my-auto flex gap-6 item-center absolute right-[14.5rem] top-[20px]'
            : 'my-auto flex gap-4  item-center absolute right-[12.5rem] top-[15px]'
        }
      >
        <div className="dropdown dropdown-hover my-auto dropdown-end">
          <div role="button" className="">
            <Image
              src="/images/Group 190.png"
              alt="team two"
              height={0}
              width={0}
              sizes="100vw"
              className="w-4 h-4 "
            />
            <div
              tabIndex={0}
              className="dropdown-content menu w-[640px] !right-[-240px] absolute z-10"
            >
              <div className="mt-5 bg-[#1B2435] shadow-xl shadow-blue-500/50 rounded-md relative">
                <div className="bg-[#1B2435] w-2 h-2 ms-[24rem] rotate-45 absolute -mt-1 z-20 "></div>
                <Probability />
              </div>
            </div>
          </div>
        </div>
        <div>
          <Image
            src="/images/Group 199.png"
            alt="team two"
            height={0}
            width={0}
            sizes="100vw"
            className="w-5 h-4"
          />
        </div>
      </div>
      {/* brief details  */}
      <div
        className={
          large
            ? 'col-span-2 p-2 bg-[#122948] mx-auto dropdown dropdown-hover my-auto dropdown-end absolute right-[3.5rem] top-[0px]'
            : 'col-span-2 p-2 bg-[#122948] mx-auto dropdown dropdown-hover my-auto dropdown-end absolute right-[3.5rem] top-[0px] text-xs'
        }
      >
        <div role="button">
          <div className=" grid grid-cols-3 gap-4 text-gray-500  my-auto  h-full">
            <div className="grid grid-cols content-between h-full">
              <h2>324</h2>
              <h2 className="text-green-700">324</h2>
            </div>
            <div className="grid grid-cols content-between">
              <h2 className="text-red-700">324</h2>
              <h2>324</h2>
            </div>
            <div className="grid grid-cols content-between">
              <h2 className="text-red-700">324</h2>
              <h2>324</h2>
            </div>
          </div>
          <div
            tabIndex={1}
            className="dropdown-content z-[1] menu w-[635px] !right-[-60px]"
          >
            <div className=" mt-5 bg-[#1B2435] shadow-xl shadow-blue-500/50  rounded-none relative">
              <div className="bg-[#1B2435] w-2 h-2 ms-[33.2rem] border-none p-0 m-0 rotate-45 absolute -mt-1"></div>
              <BetDroopDown />
            </div>
          </div>
        </div>
      </div>
      {/* favorite section  */}
      <div
        className={
          large
            ? 'my-auto mx-auto absolute right-5 top-5'
            : 'my-auto mx-auto absolute right-5 top-3'
        }
      >
        <div>
          <Image
            src="/icons/star_black.png"
            alt="Star logo"
            width={20}
            height={20}
          />
        </div>
      </div>
    </div>
  );
};

export default MatchCard2;