import Link from 'next/link';
import { BadgeCheck } from 'lucide-react';
import type { VendorSpotlightPayload } from '@/types/api';
import { discoveryApi } from '@/lib/api';
import { SmartImage } from '@/components/ui';

export async function VendorSpotlight({
  payload,
  locale,
}: {
  payload: VendorSpotlightPayload;
  locale: string;
}) {
  let vendor: Awaited<ReturnType<typeof discoveryApi.getVendorProfile>> | null = null;
  try {
    vendor = await discoveryApi.getVendorProfile(payload.vendor_public_id, locale);
  } catch {
    return null;
  }

  return (
    <section className="py-8 md:py-12">
      <div className="mx-auto max-w-7xl px-4">
        {payload.title ? (
          <h2 className="font-heading text-2xl md:text-3xl font-bold text-neutral-900 text-start mb-6">
            {payload.title}
          </h2>
        ) : null}
        <Link
          href={`/${locale}/vendors/${payload.vendor_public_id}`}
          className="group flex items-center justify-between rounded-xl border border-neutral-200 bg-white p-5 hover:shadow-[0_4px_16px_-4px_rgb(0_0_0/0.12)] transition-shadow"
        >
          <div className="flex items-center gap-4 min-w-0">
            <div className="h-14 w-14 flex-shrink-0 rounded-xl border border-neutral-100 bg-neutral-50 overflow-hidden">
              <SmartImage
                src={vendor.logo_url ?? null}
                alt={vendor.business_name}
                entity
                placeholderLabel={vendor.business_name}
                fallbackCategory="avatar"
                fallbackSeed={vendor.public_id}
                sizes="56px"
                className="h-full w-full"
                imgClassName="h-full w-full object-cover"
              />
            </div>
            <div className="min-w-0">
              <div className="flex items-center gap-1.5 flex-wrap">
                <span className="font-heading text-base font-semibold text-neutral-900 truncate text-start">
                  {vendor.business_name}
                </span>
                {vendor.is_verified ? (
                  <BadgeCheck className="h-4 w-4 text-primary-600 flex-shrink-0" aria-hidden />
                ) : null}
              </div>
              {vendor.city ? (
                <p className="text-xs text-neutral-500 text-start mt-0.5">📍 {vendor.city.name}</p>
              ) : null}
              {vendor.rating_avg !== null && vendor.rating_count > 0 ? (
                <p className="text-xs text-neutral-500 text-start mt-0.5">
                  ★ {vendor.rating_avg.toFixed(1)} · {vendor.rating_count}{' '}
                  {locale === 'ar' ? 'تقييم' : 'reviews'}
                </p>
              ) : null}
            </div>
          </div>
          <div className="h-8 w-8 flex-shrink-0 rounded-full border border-neutral-200 flex items-center justify-center text-neutral-400 group-hover:border-primary-300 group-hover:text-primary-600 transition-colors ms-4">
            <svg width="14" height="14" viewBox="0 0 14 14" fill="none" aria-hidden>
              <path
                d="M2 7h10M8 3l4 4-4 4"
                stroke="currentColor"
                strokeWidth="1.5"
                strokeLinecap="round"
                strokeLinejoin="round"
                className="rtl:scale-x-[-1] rtl:origin-center"
              />
            </svg>
          </div>
        </Link>
      </div>
    </section>
  );
}