'use client';

import Image from 'next/image';
import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
import Button from '../ui/Button';
import DriverRatingPill from '@/components/profile/DriverRatingPill';
import CountryFlag from '@/components/ui/CountryFlag';
import { useServices } from '@/lib/services/ServiceProvider';

interface ProfileHeaderProps {
  driver: DriverViewModel;
  rating?: number | null;
  rank?: number | null;
  isOwnProfile?: boolean;
  onEditClick?: () => void;
  teamName?: string | null;
  teamTag?: string | null;
}

export default function ProfileHeader({
  driver,
  rating,
  rank,
  isOwnProfile = false,
  onEditClick,
  teamName,
  teamTag,
}: ProfileHeaderProps) {
  const { mediaService } = useServices();

  return (
    <div className="flex items-start justify-between">
      <div className="flex items-start gap-4">
        <div className="w-20 h-20 rounded-full bg-gradient-to-br from-primary-blue to-purple-600 overflow-hidden flex items-center justify-center">
          <Image
            src={mediaService.getDriverAvatar(driver.id)}
            alt={driver.name}
            width={80}
            height={80}
            className="w-full h-full object-cover"
          />
        </div>
        
        <div>
          <div className="flex items-center gap-3 mb-2">
            <h1 className="text-3xl font-bold text-white">{driver.name}</h1>
            {driver.country && <CountryFlag countryCode={driver.country} size="lg" />}
            {teamTag && (
              <span className="px-3 py-1 bg-primary-blue/20 text-primary-blue rounded-full text-sm font-medium">
                {teamTag}
              </span>
            )}
          </div>
          
          <div className="flex items-center gap-4 text-sm text-gray-400">
            <span>iRacing ID: {driver.iracingId}</span>
            {teamName && (
              <>
                <span>•</span>
                <span className="text-primary-blue">
                  {teamTag ? `[${teamTag}] ${teamName}` : teamName}
                </span>
              </>
            )}
          </div>

          {(typeof rating === 'number' || typeof rank === 'number') && (
            <div className="mt-2">
              <DriverRatingPill rating={rating ?? null} rank={rank ?? null} />
            </div>
          )}
        </div>
      </div>

      {isOwnProfile && (
        <Button variant="secondary" onClick={onEditClick}>
          Edit Profile
        </Button>
      )}
    </div>
  );
}