Untitled

import { useState } from "react"; import { Card, CardContent } from "@/components/ui/card"; import { Button } from "@/components/ui/button"; import { Timer, AlertCircle } from "lucide-react";

export default function TunisianLeagueScoreboard() { const [score, setScore] = useState({ est: 0, ca: 0 }); const [extraTime, setExtraTime] = useState(null); const [redCard, setRedCard] = useState(null);

return ( <div className="flex flex-col items-center bg-red-900 p-4 text-white rounded-xl w-full max-w-lg"> <h1 className="text-2xl font-bold mb-4">Tunisian Professional League Scoreboard</h1>

<Card className="w-full text-center p-4 bg-white text-black border-red-900 border-2 rounded-lg">
    <CardContent className="flex justify-between items-center">
          <div className="flex flex-col items-center">
                  <img src="/logos/est.png" alt="EST Logo" className="w-16 h-16" />
                          <span className="text-lg font-bold">EST</span>
                                </div>
                                      <div className="text-4xl font-bold">{score.est} - {score.ca}</div>
                                            <div className="flex flex-col items-center">
                                                    <img src="/logos/ca.png" alt="CA Logo" className="w-16 h-16" />
                                                            <span className="text-lg font-bold">CA</span>
                                                                  </div>
                                                                      </CardContent>
                                                                        </Card>
                                                                          
                                                                            {extraTime && (
                                                                                    <div className="mt-3 flex items-center gap-2 bg-yellow-500 text-black px-3 py-1 rounded-lg">
                                                                                          <Timer size={20} /> Extra Time: {extraTime} min
                                                                                              </div>
                                                                            )}
                                                                              
                                                                                {redCard && (
                                                                                        <div className="mt-3 flex items-center gap-2 bg-red-600 px-3 py-1 rounded-lg">
                                                                                              <AlertCircle size={20} /> Red Card: {redCard}
                                                                                                  </div>
                                                                                )}
                                                                                  
                                                                                    <div className="mt-4 flex gap-3">
                                                                                        <Button onClick={() => setScore({ ...score, est: score.est + 1 })} className="bg-yellow-500 text-black">EST Goal</Button>
                                                                                            <Button onClick={() => setScore({ ...score, ca: score.ca + 1 })} className="bg-red-600">CA Goal</Button>
                                                                                              </div>
                                                                                                
                                                                                                  <div className="mt-3 flex gap-3">
                                                                                                      <Button onClick={() => setExtraTime(extraTime ? null : 5)} className="bg-yellow-300 text-black">Toggle Extra Time</Button>
                                                                                                          <Button onClick={() => setRedCard(redCard ? null : "Player #10")} className="bg-red-700">Toggle Red Card</Button>
                                                                                                            </div>
                                                                                                            </div>

); }


                                                                                )}
                                                                            )})}