interface Tour {
  id: number;
  city: string;
  start_date: string;
  end_date: string;
  notes: string | null;
}

interface TourDisplayProps {
  tours: Tour[];
}

export default function TourDisplay({ tours }: TourDisplayProps) {
  if (tours.length === 0) return null;

  return (
    <div className="bg-surface rounded-lg p-6">
      <h2 className="text-lg font-semibold mb-4 flex items-center gap-2">
        <svg className="w-5 h-5 text-gold" fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
        </svg>
        Upcoming Tours
      </h2>
      <div className="space-y-3">
        {tours.map((tour) => (
          <div
            key={tour.id}
            className="bg-surface-light border border-gold/10 rounded-lg p-4"
          >
            <div className="flex items-center gap-2 mb-1">
              <h3 className="font-semibold text-gold">{tour.city}</h3>
            </div>
            <p className="text-text-muted text-sm">
              {new Date(tour.start_date).toLocaleDateString(undefined, {
                day: "numeric",
                month: "short",
                year: "numeric",
              })}{" "}
              -{" "}
              {new Date(tour.end_date).toLocaleDateString(undefined, {
                day: "numeric",
                month: "short",
                year: "numeric",
              })}
            </p>
            {tour.notes && (
              <p className="text-text-muted text-xs mt-1">{tour.notes}</p>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}