Untitled

import React, { useState } from "react";
import MatchScoreCardLayout from "./card/MatchScoreCardLayout";
import "../matchScoreCard/matchScoreCard.css";
import { Spinner } from "react-bootstrap";
import MatchScoreCardSlider from "./scoreCardLayout/MatchScoreCardSlider";

function MatchScoreCard() {
  const [loading, setLoading] = useState(false);

  const matchData = [
    {
      id: 1,
      matchTitle: "6th Match, 2025",
      matchStatus: "Live",
      team1: {
        name: "Majhi Mumbai",
        logo: "/path/to/team1/logo",
        score: "58 / 9",
        overs: "10.0 OV",
        logoClass: "team1"
      },
      team2: {
        name: "Opponent",
        logo: "/path/to/team2/logo",
        score: "60 / 0",
        overs: "7.4 OV",
        logoClass: "team2"
      },
      footerText: "Majhi Mumbai Choose to bat"
    },
    {
      id: 2,
      matchTitle: "6th Match, 2025",
      matchStatus: "Live",
      team1: {
        name: "Majhi Mumbai",
        logo: "/path/to/team1/logo",
        score: "58 / 9",
        overs: "10.0 OV",
        logoClass: "team1"
      },
      team2: {
        name: "Opponent",
        logo: "/path/to/team2/logo",
        score: "60 / 0",
        overs: "7.4 OV",
        logoClass: "team2"
      },
      footerText: "Majhi Mumbai Choose to bat"
    },
    {
      id: 3,
      matchTitle: "6th Match, 2025",
      matchStatus: "Live",
      team1: {
        name: "Majhi Mumbai",
        logo: "/path/to/team1/logo",
        score: "58 / 9",
        overs: "10.0 OV",
        logoClass: "team1"
      },
      team2: {
        name: "Opponent",
        logo: "/path/to/team2/logo",
        score: "60 / 0",
        overs: "7.4 OV",
        logoClass: "team2"
      },
      footerText: "Majhi Mumbai Choose to bat"
    },
    {
      id: 4,
      matchTitle: "6th Match, 2025",
      matchStatus: "Live",
      team1: {
        name: "Majhi Mumbai",
        logo: "/path/to/team1/logo",
        score: "58 / 9",
        overs: "10.0 OV",
        logoClass: "team1"
      },
      team2: {
        name: "Opponent",
        logo: "/path/to/team2/logo",
        score: "60 / 0",
        overs: "7.4 OV",
        logoClass: "team2"
      },
      footerText: "Majhi Mumbai Choose to bat"
    },
    {
      id: 5,
      matchTitle: "6th Match, 2025",
      matchStatus: "Live",
      team1: {
        name: "Majhi Mumbai",
        logo: "/path/to/team1/logo",
        score: "58 / 9",
        overs: "10.0 OV",
        logoClass: "team1"
      },
      team2: {
        name: "Opponent",
        logo: "/path/to/team2/logo",
        score: "60 / 0",
        overs: "7.4 OV",
        logoClass: "team2"
      },
      footerText: "Majhi Mumbai Choose to bat"
    },
    {
      id: 6,
      matchTitle: "6th Match, 2025",
      matchStatus: "Live",
      team1: {
        name: "Majhi Mumbai",
        logo: "/path/to/team1/logo",
        score: "58 / 9",
        overs: "10.0 OV",
        logoClass: "team1"
      },
      team2: {
        name: "Opponent",
        logo: "/path/to/team2/logo",
        score: "60 / 0",
        overs: "7.4 OV",
        logoClass: "team2"
      },
      footerText: "Majhi Mumbai Choose to bat"
    },
    {
      id: 7,
      matchTitle: "6th Match, 2025",
      matchStatus: "Live",
      team1: {
        name: "Majhi Mumbai",
        logo: "/path/to/team1/logo",
        score: "58 / 9",
        overs: "10.0 OV",
        logoClass: "team1"
      },
      team2: {
        name: "Opponent",
        logo: "/path/to/team2/logo",
        score: "60 / 0",
        overs: "7.4 OV",
        logoClass: "team2"
      },
      footerText: "Majhi Mumbai Choose to bat"
    },
    {
      id: 8,
      matchTitle: "6th Match, 2025",
      matchStatus: "Live",
      team1: {
        name: "Majhi Mumbai",
        logo: "/path/to/team1/logo",
        score: "58 / 9",
        overs: "10.0 OV",
        logoClass: "team1"
      },
      team2: {
        name: "Opponent",
        logo: "/path/to/team2/logo",
        score: "60 / 0",
        overs: "7.4 OV",
        logoClass: "team2"
      },
      footerText: "Majhi Mumbai Choose to bat"
    },
    {
      id: 9,
      matchTitle: "6th Match, 2025",
      matchStatus: "Live",
      team1: {
        name: "Majhi Mumbai",
        logo: "/path/to/team1/logo",
        score: "58 / 9",
        overs: "10.0 OV",
        logoClass: "team1"
      },
      team2: {
        name: "Opponent",
        logo: "/path/to/team2/logo",
        score: "60 / 0",
        overs: "7.4 OV",
        logoClass: "team2"
      },
      footerText: "Majhi Mumbai Choose to bat"
    },
    {
      id: 10,
      matchTitle: "6th Match, 2025",
      matchStatus: "Live",
      team1: {
        name: "Majhi Mumbai",
        logo: "/path/to/team1/logo",
        score: "58 / 9",
        overs: "10.0 OV",
        logoClass: "team1"
      },
      team2: {
        name: "Opponent",
        logo: "/path/to/team2/logo",
        score: "60 / 0",
        overs: "7.4 OV",
        logoClass: "team2"
      },
      footerText: "Majhi Mumbai Choose to bat"
    },
    {
      id: 11,
      matchTitle: "6th Match, 2025",
      matchStatus: "Live",
      team1: {
        name: "Majhi Mumbai",
        logo: "/path/to/team1/logo",
        score: "58 / 9",
        overs: "10.0 OV",
        logoClass: "team1"
      },
      team2: {
        name: "Opponent",
        logo: "/path/to/team2/logo",
        score: "60 / 0",
        overs: "7.4 OV",
        logoClass: "team2"
      },
      footerText: "Majhi Mumbai Choose to bat"
    },
    {
      id: 12,
      matchTitle: "6th Match, 2025",
      matchStatus: "Live",
      team1: {
        name: "Majhi Mumbai",
        logo: "/path/to/team1/logo",
        score: "58 / 9",
        overs: "10.0 OV",
        logoClass: "team1"
      },
      team2: {
        name: "Opponent",
        logo: "/path/to/team2/logo",
        score: "60 / 0",
        overs: "7.4 OV",
        logoClass: "team2"
      },
      footerText: "Majhi Mumbai Choose to bat"
    },
  ];

  return (
    <section id="matchScoreCard">
      <div className="container-fluid">
        <div className="row">
          <div className="col-lg-12 col-md-12 col-12 mx-auto px-0">
            {loading ? (
              <Spinner />
            ) : (
              <MatchScoreCardSlider>
                {matchData.map((item, index) => (
                  <div className="cardItmBox" key={index}>
                    <MatchScoreCardLayout
                      matchData={item}
                    />
                  </div>
                ))}
              </MatchScoreCardSlider>
            )}
          </div>
        </div>
      </div>
    </section>
  );
}

export default MatchScoreCard;