/**
 * One dealer listing row. The anchor is the followed link this whole
 * feature exists to create: business name + city/state, plain rel
 * (NO nofollow/sponsored/ugc — see spec §9).
 *
 * Styled to the dealer-template card idiom: white surface, #c6c6c6
 * border, rounded-lg, navy link text, orange border on hover.
 */
import type { DirectoryDealer } from '@/lib/dealer-directory';
import { getCanonicalUrl } from '@/lib/seo-utils';

export function DealerRow({ dealer }: { dealer: DirectoryDealer }) {
  const name = dealer.businessName ?? dealer.subdomain ?? 'AMSOIL Dealer';
  const url = getCanonicalUrl(dealer);
  return (
    <div className="mb-2 flex items-center gap-3 rounded-lg border border-[#d1d1d1] bg-white p-3 transition-colors hover:border-[#f8981d] sm:gap-4 sm:p-4">
      {dealer.logoUrl ? (
        // eslint-disable-next-line @next/next/no-img-element
        <img
          src={dealer.logoUrl}
          alt=""
          width={48}
          height={48}
          loading="lazy"
          className="h-12 w-12 flex-shrink-0 rounded-lg border border-[#d1d1d1] bg-white object-contain p-1"
        />
      ) : (
        <div
          aria-hidden
          className="flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-lg bg-[#093b66] font-bold text-white"
        >
          {name.charAt(0).toUpperCase()}
        </div>
      )}
      <div className="min-w-0">
        <a
          href={url}
          className="rounded font-semibold text-[#093b66] transition-colors hover:text-[#0d5a99] hover:underline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#093b66]"
        >
          {name}
          <span className="mt-0.5 block text-sm font-normal text-[#595959]">
            {dealer.city}, {dealer.state}
          </span>
        </a>
        {dealer.description && (
          <p className="truncate text-sm text-[#757575]">{dealer.description}</p>
        )}
      </div>
    </div>
  );
}