import { useNavigate } from 'react-router-dom';
import Layout from '../components/layout/Layout';
import { mockEvents } from '../mocks/events';
import { Calendar, MapPin, Users } from 'lucide-react';

const EventsPage = () => {
  const navigate = useNavigate();

  const handleJoinEvent = (eventId) => {
    navigate(`/events/${eventId}/chat`);
  };

  return (
    <Layout>
      <div className="max-w-4xl mx-auto">
        <h1 className="text-3xl font-bold text-gray-900 mb-2">Choose an event</h1>
        <p className="text-gray-600 mb-8">Join an event and start connecting with other dancers</p>

        <div className="grid gap-6 md:grid-cols-2">
          {mockEvents.map((event) => (
            <div
              key={event.id}
              className="bg-white rounded-lg shadow-md hover:shadow-lg transition-shadow p-6 border border-gray-200"
            >
              <h3 className="text-xl font-bold text-gray-900 mb-3">{event.name}</h3>

              <div className="space-y-2 mb-4">
                <div className="flex items-center text-gray-600">
                  <MapPin className="w-4 h-4 mr-2" />
                  <span className="text-sm">{event.location}</span>
                </div>
                <div className="flex items-center text-gray-600">
                  <Calendar className="w-4 h-4 mr-2" />
                  <span className="text-sm">
                    {new Date(event.start_date).toLocaleDateString('en-US')} - {new Date(event.end_date).toLocaleDateString('en-US')}
                  </span>
                </div>
                <div className="flex items-center text-gray-600">
                  <Users className="w-4 h-4 mr-2" />
                  <span className="text-sm">{event.participants_count} participants</span>
                </div>
              </div>

              <p className="text-gray-600 text-sm mb-4">{event.description}</p>

              <button
                onClick={() => handleJoinEvent(event.id)}
                className="w-full px-4 py-2 bg-primary-600 text-white rounded-md hover:bg-primary-700 transition-colors"
              >
                Join chat
              </button>
            </div>
          ))}
        </div>
      </div>
    </Layout>
  );
};

export default EventsPage;