import { useState, useEffect } from 'react';
import type { Ticket } from '../types';

function StatusPage() {
  const [tickets, setTickets] = useState<Ticket[]>([]);

  useEffect(() => {
    const loadTickets = async () => {
      // TODO: Replace with API call to fetch tickets by match
      setTickets([]);
    };
    loadTickets();
  }, []);

  return (
    <div className="max-w-4xl mx-auto">
      <h1 className="text-3xl font-bold mb-8">Booking Status</h1>

      <div className="bg-gray-800 rounded-lg overflow-hidden">
        <table className="w-full">
          <thead>
            <tr className="bg-gray-700">
              <th className="px-6 py-3 text-left">Name</th>
              <th className="px-6 py-3 text-left">Email</th>
              <th className="px-6 py-3 text-left">Phone</th>
              <th className="px-6 py-3 text-left">Seat</th>
              <th className="px-6 py-3 text-left">Status</th>
            </tr>
          </thead>
          <tbody className="divide-y divide-gray-700">
            {tickets.map((ticket) => (
              <tr key={ticket.id}>
                <td className="px-6 py-4">{ticket.customerName}</td>
                <td className="px-6 py-4">{ticket.customerEmail}</td>
                <td className="px-6 py-4">{ticket.customerPhone}</td>
                <td className="px-6 py-4">{ticket.seatNumber}</td>
                <td className="px-6 py-4">
                  <span className={`px-2 py-1 rounded ${
                    ticket.status === 'confirmed' ? 'bg-green-600' :
                    ticket.status === 'pending' ? 'bg-yellow-600' :
                    'bg-red-600'
                  }`}>
                    {ticket.status}
                  </span>
                </td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </div>
  );
}

export default StatusPage;