import Link from 'next/link';
import Image from 'next/image';
import type { DriverDTO } from '@gridpilot/racing/application/dto/DriverDTO';
import { getImageService } from '@/lib/di-container';

export interface DriverIdentityProps {
  driver: DriverDTO;
  href?: string;
  contextLabel?: React.ReactNode;
  meta?: React.ReactNode;
  size?: 'sm' | 'md';
}

export default function DriverIdentity(props: DriverIdentityProps) {
  const { driver, href, contextLabel, meta, size = 'md' } = props;

  const avatarSize = size === 'sm' ? 40 : 48;
  const nameTextClasses =
    size === 'sm'
      ? 'text-sm font-medium text-white'
      : 'text-base md:text-lg font-semibold text-white';

  const metaTextClasses = 'text-xs md:text-sm text-gray-400';

  const content = (
    <div className="flex items-center gap-3 md:gap-4 flex-1 min-w-0">
      <div
        className={`rounded-full bg-primary-blue/20 overflow-hidden flex items-center justify-center shrink-0`}
        style={{ width: avatarSize, height: avatarSize }}
      >
        <Image
          src={getImageService().getDriverAvatar(driver.id)}
          alt={driver.name}
          width={avatarSize}
          height={avatarSize}
          className="w-full h-full object-cover"
        />
      </div>

      <div className="flex-1 min-w-0">
        <div className="flex items-center gap-2 min-w-0">
          <span className={`${nameTextClasses} truncate`}>{driver.name}</span>
          {contextLabel ? (
            <span className="inline-flex items-center rounded-full bg-charcoal-outline/60 px-2 py-0.5 text-[10px] md:text-xs font-medium text-gray-200">
              {contextLabel}
            </span>
          ) : null}
        </div>
        {meta ? <div className={`${metaTextClasses} mt-0.5 truncate`}>{meta}</div> : null}
      </div>
    </div>
  );

  if (href) {
    return (
      <Link href={href} className="flex items-center gap-3 md:gap-4 flex-1 min-w-0">
        {content}
      </Link>
    );
  }

  return <div className="flex items-center gap-3 md:gap-4 flex-1 min-w-0">{content}</div>;
}