import React from 'react';
import { Calendar, Trophy, Users, Zap } from 'lucide-react';

interface RaceResultsHeaderProps {
  raceTrack?: string;
  raceScheduledAt?: string;
  totalDrivers?: number;
  leagueName?: string;
  raceSOF?: number | null;
}

const DEFAULT_RACE_TRACK = 'Race';

export default function RaceResultsHeader({
  raceTrack = 'Race',
  raceScheduledAt,
  totalDrivers,
  leagueName,
  raceSOF
}: RaceResultsHeaderProps) {
  return (
    <div className="relative overflow-hidden rounded-2xl bg-gray-500/10 border border-gray-500/30 p-6 sm:p-8">
      <div className="absolute top-0 right-0 w-64 h-64 bg-white/5 rounded-full blur-3xl" />

      <div className="relative z-10">
        <div className="flex items-center gap-3 mb-4">
          <div className="flex items-center gap-2 px-3 py-1.5 rounded-full bg-performance-green/10 border border-performance-green/30">
            <Trophy className="w-4 h-4 text-performance-green" />
            <span className="text-sm font-semibold text-performance-green">
              Final Results
            </span>
          </div>
          {raceSOF && (
            <span className="flex items-center gap-1.5 text-warning-amber text-sm">
              <Zap className="w-4 h-4" />
              SOF {raceSOF}
            </span>
          )}
        </div>

        <h1 className="text-2xl sm:text-3xl font-bold text-white mb-2">
          {raceTrack || DEFAULT_RACE_TRACK} Results
        </h1>

        <div className="flex flex-wrap items-center gap-x-6 gap-y-2 text-gray-400">
          {raceScheduledAt && (
            <span className="flex items-center gap-2">
              <Calendar className="w-4 h-4" />
              {new Date(raceScheduledAt).toLocaleDateString('en-US', {
                weekday: 'short',
                month: 'short',
                day: 'numeric',
              })}
            </span>
          )}
          {totalDrivers !== undefined && totalDrivers !== null && (
            <span className="flex items-center gap-2">
              <Users className="w-4 h-4" />
              {totalDrivers} drivers classified
            </span>
          )}
          {leagueName && <span className="text-primary-blue">{leagueName}</span>}
        </div>
      </div>
    </div>
  );
}