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

export interface DriverIdentityProps {
  driver: DriverViewModel;
  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';

  // Use provided avatar URL or show placeholder if null
  const avatarUrl = driver.avatarUrl;

  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 }}
      >
        {avatarUrl ? (
          <Image
            src={avatarUrl}
            alt={driver.name}
            width={avatarSize}
            height={avatarSize}
            className="w-full h-full object-cover"
          />
        ) : (
          <PlaceholderImage size={avatarSize} />
        )}
      </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>;
}