Untitled

import React from "react";
import "../card/matchScoreCardLayout.css";
import { team1, team2 } from "../../../../../assets/imagePath";

const matchData = [
  {
    matchTitle: "6th Match, 2025",
    matchStatus: "Live",
    team1: {
      name: "Majhi Mumbai",
      logo: team1,
      score: "58 / 9",
      overs: "10.0 OV",
      logoClass: "team1",
    },
    team2: {
      name: "Opponent",
      logo: team2,
      score: "60 / 0",
      overs: "7.4 OV",
      logoClass: "team2",
    },
    footerText: "Majhi Mumbai Choose to bat",
  },
  {
    matchTitle: "7th Match, 2025",
    matchStatus: "Completed",
    team1: {
      name: "Chennai Kings",
      logo: team1,
      score: "165 / 8",
      overs: "20.0 OV",
      logoClass: "team1",
    },
    team2: {
      name: "Delhi Daredevils",
      logo: team2,
      score: "160 / 10",
      overs: "19.4 OV",
      logoClass: "team2",
    },
    footerText: "Chennai Kings won by 5 runs",
  },
  {
    matchTitle: "8th Match, 2025",
    matchStatus: "Live",
    team1: {
      name: "Mumbai Indians",
      logo: team1,
      score: "120 / 3",
      overs: "15.2 OV",
      logoClass: "team1",
    },
    team2: {
      name: "Kolkata Knight Riders",
      logo: team2,
      score: "110 / 5",
      overs: "14.0 OV",
      logoClass: "team2",
    },
    footerText: "Mumbai Indians chasing target",
  },
  {
    matchTitle: "9th Match, 2025",
    matchStatus: "Scheduled",
    team1: {
      name: "Royal Challengers Bangalore",
      logo: team1,
      score: "N/A",
      overs: "N/A",
      logoClass: "team1",
    },
    team2: {
      name: "Punjab Kings",
      logo: team2,
      score: "N/A",
      overs: "N/A",
      logoClass: "team2",
    },
    footerText: "Match will start at 7:00 PM",
  },
  {
    matchTitle: "10th Match, 2025",
    matchStatus: "Completed",
    team1: {
      name: "Rajasthan Royals",
      logo: team1,
      score: "180 / 4",
      overs: "20.0 OV",
      logoClass: "team1",
    },
    team2: {
      name: "Sunrisers Hyderabad",
      logo: team2,
      score: "175 / 9",
      overs: "19.5 OV",
      logoClass: "team2",
    },
    footerText: "Rajasthan Royals won by 5 wickets",
  },
];

const MatchScoreCardLayout = ({ matchData }) => {
  return (
    <div className="match-card">
      <div className="match-header">
        <span className="match-title">{matchData.matchTitle}</span>
        <span className="match-status">
          <span className="live-indicator"></span> {matchData.matchStatus}
        </span>
      </div>

      <div className="match-scores">
        <div className="team">
          <img
            src={matchData.team1.logo}
            alt={`${matchData.team1.name} Logo`}
            className={`logo ${matchData.team1.logoClass}`}
          />
          <div className="team-score">
            <span className="runs-wickets">{matchData.team1.score}</span>
            <span className="overs">{matchData.team1.overs}</span>
          </div>
        </div>
        <span className="vs-text">Vs</span>
        <div className="team">
          <img
            src={matchData.team2.logo}
            alt={`${matchData.team2.name} Logo`}
            className={`logo ${matchData.team2.logoClass}`}
          />
          <div className="team-score">
            <span className="runs-wickets">{matchData.team2.score}</span>
            <span className="overs">{matchData.team2.overs}</span>
          </div>
        </div>
      </div>

      <div className="match-footer">
        <p>
        {matchData.footerText}
        </p>
      </div>
    </div>
  );
};

export default MatchScoreCardLayout;