'use client';

import React from 'react';
import Image from 'next/image';
import Link from 'next/link';
import type { DriverViewModel } from '@/lib/view-models/DriverViewModel';
import DriverRating from '@/components/profile/DriverRatingPill';
import PlaceholderImage from '@/components/ui/PlaceholderImage';

export interface DriverSummaryPillProps {
  driver: DriverViewModel;
  rating: number | null;
  rank: number | null;
  avatarSrc?: string | null;
  onClick?: () => void;
  href?: string;
}

export default function DriverSummaryPill(props: DriverSummaryPillProps) {
  const { driver, rating, rank, avatarSrc, onClick, href } = props;

  const resolvedAvatar = avatarSrc;

  const content = (
    <>
      <div className="w-8 h-8 rounded-full overflow-hidden bg-charcoal-outline flex items-center justify-center border border-charcoal-outline/80">
        {resolvedAvatar ? (
          <Image
            src={resolvedAvatar}
            alt={driver.name}
            width={32}
            height={32}
            className="w-full h-full object-cover"
          />
        ) : (
          <PlaceholderImage size={32} />
        )}
      </div>

      <div className="flex flex-col leading-tight text-left">
        <span className="text-xs font-semibold text-white truncate max-w-[140px]">
          {driver.name}
        </span>

        <DriverRating rating={rating} rank={rank} />
      </div>
    </>
  );

  if (href) {
    return (
      <Link
        href={href}
        className="flex items-center gap-3 rounded-full bg-iron-gray/70 px-3 py-1.5 border border-charcoal-outline/80 shadow-[0_0_18px_rgba(0,0,0,0.45)] hover:border-primary-blue/60 hover:bg-iron-gray transition-colors"
      >
        {content}
      </Link>
    );
  }

  if (onClick) {
    return (
      <button
        type="button"
        onClick={onClick}
        className="flex items-center gap-3 rounded-full bg-iron-gray/70 px-3 py-1.5 border border-charcoal-outline/80 shadow-[0_0_18px_rgba(0,0,0,0.45)] hover:border-primary-blue/60 hover:bg-iron-gray transition-colors"
      >
        {content}
      </button>
    );
  }

  return (
    <div className="flex items-center gap-3 rounded-full bg-iron-gray/70 px-3 py-1.5 border border-charcoal-outline/80">
      {content}
    </div>
  );
}