Untitled

import React from 'react';
import { Card, CardHeader, CardTitle, CardContent } from '@/components/ui/card';

const FlightAvailability = () => {
  const destinations = {
    'AMS': { city: 'Amsterdam', outFeb: ['8', '11', '13', '24', '25'], outMar: ['3', '6'], 
             inFeb: ['16', '20', '23', '24', '27'], inMar: ['1', '3', '4', '6'] },
    'ARN': { city: 'Stockholm', outFeb: [], outMar: [], 
             inFeb: [], inMar: ['5'] },
    'ATH': { city: 'Athens', outFeb: [], outMar: [], 
             inFeb: ['20'], inMar: [] },
    'BCN': { city: 'Barcelona', outFeb: [], outMar: [], 
             inFeb: ['24'], inMar: ['1', '4'] },
    'CDG': { city: 'Paris', outFeb: [], outMar: [], 
             inFeb: ['20', '24'], inMar: ['3', '6'] },
    'DUB': { city: 'Dublin', outFeb: ['7', '8'], outMar: ['6'], 
             inFeb: ['17', '24'], inMar: ['1', '4', '6'] },
    'FCO': { city: 'Rome', outFeb: ['13', '22', '24'], outMar: ['3'], 
             inFeb: ['14', '17', '20', '23', '27'], inMar: ['1', '4'] },
    'FRA': { city: 'Frankfurt', outFeb: ['11', '25'], outMar: ['6'], 
             inFeb: ['20', '24'], inMar: ['1', '4', '6'] },
    'LGW': { city: 'London Gatwick', outFeb: [], outMar: [], 
             inFeb: ['20'], inMar: ['3', '4', '5', '6'] },
    'LIS': { city: 'Lisbon', outFeb: ['7', '11', '22', '24'], outMar: ['6'], 
             inFeb: ['17', '24', '27'], inMar: ['3', '4', '6'] },
    'MAD': { city: 'Madrid', outFeb: ['7', '13', '24'], outMar: [], 
             inFeb: ['20', '24', '27'], inMar: ['1', '4', '6'] },
    'MUC': { city: 'Munich', outFeb: [], outMar: ['6'], 
             inFeb: [], inMar: ['3', '6'] },
    'MXP': { city: 'Milan', outFeb: ['25'], outMar: ['3', '6'], 
             inFeb: ['20'], inMar: ['3', '4', '6'] },
    'STN': { city: 'London Stansted', outFeb: [], outMar: [], 
             inFeb: ['27'], inMar: ['1', '4', '5', '6'] },
    'VIE': { city: 'Vienna', outFeb: ['7', '8', '13'], outMar: [], 
             inFeb: ['16', '23', '24', '27'], inMar: ['3', '4', '6'] },
    'ZRH': { city: 'Zurich', outFeb: ['25'], outMar: [], 
             inFeb: [], inMar: ['3', '5'] }
  };

  return (
    <Card className="w-full max-w-6xl">
      <CardHeader>
        <CardTitle className="text-2xl font-bold text-center">Flight Availability - February/March 2025</CardTitle>
      </CardHeader>
      <CardContent>
        <div className="space-y-8">
          {Object.entries(destinations).map(([code, data]) => (
            <div key={code} className="space-y-2">
              <h3 className="text-lg font-semibold">{data.city} ({code})</h3>
              <div className="flex flex-col md:flex-row md:space-x-4 space-y-4 md:space-y-0">
                <div className="flex-1">
                  <h4 className="text-sm font-medium text-gray-500 mb-2">MEL → {code}</h4>
                  <div className="flex flex-wrap gap-1">
                    {data.outFeb.map(date => (
                      <span key={`out-feb-${date}`} className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm">
                        Feb {date}
                      </span>
                    ))}
                    {data.outMar.map(date => (
                      <span key={`out-mar-${date}`} className="px-2 py-1 bg-green-100 text-green-800 rounded text-sm">
                        Mar {date}
                      </span>
                    ))}
                    {data.outFeb.length === 0 && data.outMar.length === 0 && (
                      <span className="text-sm text-gray-500">No outbound flights available</span>
                    )}
                  </div>
                </div>
                <div className="flex-1">
                  <h4 className="text-sm font-medium text-gray-500 mb-2">{code} → MEL</h4>
                  <div className="flex flex-wrap gap-1">
                    {data.inFeb.map(date => (
                      <span key={`in-feb-${date}`} className="px-2 py-1 bg-blue-100 text-blue-800 rounded text-sm">
                        Feb {date}
                      </span>
                    ))}
                    {data.inMar.map(date => (
                      <span key={`in-mar-${date}`} className="px-2 py-1 bg-green-100 text-green-800 rounded text-sm">
                        Mar {date}
                      </span>
                    ))}
                    {data.inFeb.length === 0 && data.inMar.length === 0 && (
                      <span className="text-sm text-gray-500">No inbound flights available</span>
                    )}
                  </div>
                </div>
              </div>
            </div>
          ))}
        </div>
      </CardContent>
    </Card>
  );
};

export default FlightAvailability;