import { useState, useEffect } from 'react';
import { MapPin, Users, Loader2 } from 'lucide-react';
import api from '../api/api';

const TrendingSpots = () => {
  const [spots, setSpots] = useState([
    {
      id: 1,
      name: 'Charminar',
      location: 'Hyderabad',
      image: 'https://images.unsplash.com/photo-1599707367072-cd519bdda84a?auto=format&fit=crop&w=600&q=80',
      shoots: 234,
      photographers: 123,
    },
    {
      id: 2,
      name: 'Gateway of India',
      location: 'Mumbai',
      image: 'https://images.unsplash.com/photo-1567157577867-05ccb1388e66?auto=format&fit=crop&w=600&q=80',
      shoots: 456,
      photographers: 198,
    },
    {
      id: 3,
      name: 'Taj Mahal',
      location: 'Agra',
      image: 'https://images.unsplash.com/photo-1564507592333-c60657eea523?auto=format&fit=crop&w=600&q=80',
      shoots: 298,
      photographers: 156,
    },
    {
      id: 4,
      name: 'Marina Beach',
      location: 'Chennai',
      image: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?auto=format&fit=crop&w=600&q=80',
      shoots: 178,
      photographers: 87,
    },
  ]);

  return (
    <div>
      <div className="flex items-center justify-between mb-6">
        <h2 className="text-2xl font-bold">🏆 Trending Photo Spots</h2>
        <a href="/search" className="text-blue-600 hover:text-blue-700 font-medium">See All →</a>
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4">
        {spots.map(spot => (
          <div key={spot.id} className="group rounded-lg overflow-hidden hover:shadow-lg transition-shadow cursor-pointer">
            <div className="relative aspect-square overflow-hidden bg-gray-200">
              <img
                src={spot.image}
                alt={spot.name}
                className="w-full h-full object-cover group-hover:scale-110 transition-transform duration-300"
              />
              <div className="absolute inset-0 bg-gradient-to-t from-black/60 to-transparent flex flex-col justify-end p-4 text-white">
                <h3 className="text-lg font-bold">{spot.name}</h3>
                <p className="text-sm text-gray-200 flex items-center gap-1">
                  <MapPin size={14} /> {spot.location}
                </p>
              </div>
            </div>
            <div className="bg-white p-4 border-b border-l border-r border-gray-200">
              <div className="grid grid-cols-2 gap-2 text-sm">
                <div className="text-center">
                  <p className="font-bold text-gray-900">{spot.shoots}</p>
                  <p className="text-xs text-gray-500">Photos</p>
                </div>
                <div className="text-center border-l border-gray-200">
                  <p className="font-bold text-gray-900">{spot.photographers}</p>
                  <p className="text-xs text-gray-500">Photographers</p>
                </div>
              </div>
              <a
                href={`/search?q=${spot.name}`}
                className="block mt-3 w-full py-2 text-center bg-blue-50 text-blue-600 font-medium rounded hover:bg-blue-100 transition text-sm"
              >
                View Photographers
              </a>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};

export default TrendingSpots;