'use client';

import { useLocale } from '@/lib/i18n/react';
import { Image } from '@/components/ui/primitives/Image';
import type { Config } from './config';

export function Component({ config }: { config: Config; data: unknown }) {
  const { locale } = useLocale();

  if (!config.imageUrl) return null;

  const altText = config.alt[locale] || config.alt.he || '';
  const aspectClass = config.aspect === '21:9' ? 'aspect-[21/9]' : 'aspect-video';
  const sizeClass = config.mode === 'featured' ? 'w-full' : 'max-w-sm';

  const image = (
    <div className={`${sizeClass} ${aspectClass} relative overflow-hidden rounded-lg`}>
      <Image
        src={config.imageUrl}
        alt={altText}
        variant="hero"
        className="h-full w-full object-cover"
        loading="lazy"
        width={1920}
        height={config.aspect === '21:9' ? 823 : 1080}
      />
    </div>
  );

  if (config.href) {
    return (
      <div className="bg-surface-raised relative mx-6 mt-4 overflow-hidden rounded-2xl p-6 shadow-md">
        {/* Soft pastel halo — hero-level backdrop */}
        <div
          className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--color-mode-customer-50),_transparent_70%)]"
          aria-hidden="true"
        />
        <div className="relative z-10">
          <a
            href={config.href}
            className="focus-visible:outline-brand-primary-500 block focus-visible:outline focus-visible:outline-2"
            aria-label={altText || undefined}
          >
            {image}
          </a>
        </div>
      </div>
    );
  }

  return (
    <div className="bg-surface-raised relative mx-6 mt-4 overflow-hidden rounded-2xl p-6 shadow-md">
      {/* Soft pastel halo — hero-level backdrop */}
      <div
        className="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_top,_var(--color-mode-customer-50),_transparent_70%)]"
        aria-hidden="true"
      />
      <div className="relative z-10">{image}</div>
    </div>
  );
}