// @design-system: domain/VendorHeroPreview
'use client';

/**
 * VendorHeroPreview — live preview of the vendor hero banner as it will appear
 * on deal detail and business pages. Mirrors DealDetail hero markup exactly.
 *
 * Show in BusinessCardEditor below the hero ImageUploadField so vendors
 * see the exact output before saving.
 */

import { useT } from '@/lib/i18n/react';
import { cn } from '@/lib/cn';
import { buildVariantUrl } from '@/components/ui/primitives/Image/buildVariantUrl';

export interface VendorHeroPreviewProps {
  heroImageUrl: string | null;
  logoUrl: string | null;
  vendorName: string;
  /** Horizontal focal point 0–1. Default 0.5. */
  focalX?: number;
  /** Vertical focal point 0–1. Default 0.5. */
  focalY?: number;
  className?: string;
}

export function VendorHeroPreview({
  heroImageUrl,
  logoUrl,
  vendorName,
  focalX = 0.5,
  focalY = 0.5,
  className,
}: VendorHeroPreviewProps) {
  const t = useT('vendor_hero_preview');
  const heroSrc = heroImageUrl ? buildVariantUrl(heroImageUrl, 'hero', 800) : null;
  const logoSrc = logoUrl ? buildVariantUrl(logoUrl, 'thumb', 240) : null;

  return (
    <div className={cn('flex flex-col gap-1', className)}>
      <span className="text-text-primary text-sm font-semibold">{t('label')}</span>
      <div className="relative h-40 w-full overflow-hidden rounded-lg">
        {heroSrc ? (
          <img
            src={heroSrc}
            alt=""
            aria-hidden="true"
            width={1600}
            height={640}
            className="absolute inset-0 h-full w-full object-cover"
            style={{ objectPosition: `${focalX * 100}% ${focalY * 100}%` }}
            loading="lazy"
          />
        ) : (
          <div className="bg-brand-primary-700 absolute inset-0" />
        )}

        <div
          className={cn(
            'absolute inset-0',
            heroImageUrl
              ? 'bg-gradient-to-t from-black/70 via-black/30 to-black/10'
              : 'bg-brand-primary-700',
          )}
          aria-hidden="true"
        />

        <div className="absolute start-0 bottom-0 flex items-end gap-3 ps-6 pb-4">
          <div
            className="border-surface-base h-12 w-12 shrink-0 overflow-hidden rounded-full border-2 bg-surface-base"
            aria-hidden="true"
          >
            {logoSrc && (
              <img
                src={logoSrc}
                alt=""
                aria-hidden="true"
                width={48}
                height={48}
                className="h-full w-full object-cover"
              />
            )}
          </div>
          <span className="text-sm font-bold text-white drop-shadow">{vendorName}</span>
        </div>

        {!heroImageUrl && (
          <div className="absolute inset-0 flex items-center justify-center">
            <span className="text-xs text-white/70">{t('no_image')}</span>
          </div>
        )}
      </div>
    </div>
  );
}