import React, { useState } from 'react';
import { Play, Calendar, Settings, Search, Menu, Heart } from 'lucide-react';

export default function SportsStreamingApp() {
  const [selectedSport, setSelectedSport] = useState('football');
  
  const liveGames = [
    {
      id: 1,
      title: "Lakers vs Warriors",
      sport: "basketball",
      viewers: "125K",
      thumbnail: "https://images.unsplash.com/photo-1504450758481-7338eba7524a?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
    },
    {
      id: 2,
      title: "Manchester United vs Liverpool",
      sport: "football",
      viewers: "250K",
      thumbnail: "https://images.unsplash.com/photo-1489944440615-453fc2b6a9a9?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
    },
    {
      id: 3,
      title: "Wimbledon Finals",
      sport: "tennis",
      viewers: "180K",
      thumbnail: "https://images.unsplash.com/photo-1622279457486-62dcc4a431d6?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=1000&q=80"
    }
  ];

  const sports = ['football', 'basketball', 'tennis', 'cricket', 'rugby'];

  return (
    <div className="min-h-screen bg-gray-900 text-white">
      {/* Navigation */}
      <nav className="flex items-center justify-between p-4 bg-gray-800">
        <div className="flex items-center space-x-2">
          <Menu className="h-6 w-6" />
          <h1 className="text-xl font-bold">SportStream</h1>
        </div>
        <div className="flex items-center space-x-4">
          <Search className="h-5 w-5" />
          <Settings className="h-5 w-5" />
        </div>
      </nav>

      {/* Sports Filter */}
      <div className="p-4 overflow-x-auto">
        <div className="flex space-x-4">
          {sports.map(sport => (
            <button
              key={sport}
              onClick={() => setSelectedSport(sport)}
              className={`px-4 py-2 rounded-full ${
                selectedSport === sport 
                  ? 'bg-blue-600' 
                  : 'bg-gray-700 hover:bg-gray-600'
              } transition-colors`}
            >
              {sport.charAt(0).toUpperCase() + sport.slice(1)}
            </button>
          ))}
        </div>
      </div>

      {/* Live Games */}
      <div className="p-4">
        <h2 className="text-xl font-semibold mb-4">Live Now</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          {liveGames.map(game => (
            <div key={game.id} className="bg-gray-800 rounded-lg overflow-hidden hover:transform hover:scale-105 transition-transform">
              <div className="relative">
                <img 
                  src={game.thumbnail} 
                  alt={game.title}
                  className="w-full h-48 object-cover"
                />
                <div className="absolute top-2 right-2 bg-red-600 px-2 py-1 rounded-full text-sm flex items-center">
                  <div className="w-2 h-2 bg-white rounded-full mr-2 animate-pulse"></div>
                  LIVE
                </div>
                <div className="absolute bottom-2 right-2 bg-black bg-opacity-60 px-2 py-1 rounded-full text-sm">
                  {game.viewers} viewers
                </div>
              </div>
              <div className="p-4">
                <div className="flex items-center justify-between">
                  <h3 className="font-semibold">{game.title}</h3>
                  <Heart className="h-5 w-5 text-gray-400 hover:text-red-500 cursor-pointer" />
                </div>
                <div className="flex items-center mt-2 text-gray-400">
                  <Play className="h-4 w-4 mr-2" />
                  <span className="text-sm">Watch Now</span>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>

      {/* Upcoming Games */}
      <div className="p-4">
        <div className="flex items-center justify-between mb-4">
          <h2 className="text-xl font-semibold">Upcoming Games</h2>
          <button className="flex items-center text-blue-400 hover:text-blue-300">
            <Calendar className="h-4 w-4 mr-1" />
            <span>View Schedule</span>
          </button>
        </div>
        <div className="bg-gray-800 rounded-lg p-4">
          <div className="flex items-center justify-between p-2 hover:bg-gray-700 rounded cursor-pointer">
            <div>
              <h3 className="font-medium">Real Madrid vs Barcelona</h3>
              <p className="text-sm text-gray-400">Tomorrow, 20:00 GMT</p>
            </div>
            <button className="bg-blue-600 hover:bg-blue-700 px-4 py-2 rounded-full text-sm">
              Set Reminder
            </button>
          </div>
        </div>
      </div>
    </div>
  );
}