'use client';

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

export function Component({ config }: { config: Config; data: unknown }) {
  const { locale } = useLocale();
  const title = config.title[locale] || config.title.he;
  const subtitle = config.subtitle[locale] || config.subtitle.he;

  if (!title && !config.bgImage) return null;

  return (
    <section
      className="bg-surface-raised relative mx-6 my-4 overflow-hidden rounded-2xl p-6 shadow-md"
      style={
        config.bgImage
          ? {
              backgroundImage: `url(${config.bgImage})`,
              backgroundSize: 'cover',
              backgroundPosition: 'center',
            }
          : undefined
      }
      aria-label={title || undefined}
    >
      {/* Soft pastel halo — hero-level backdrop only */}
      <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 text-center">
        <h1 className="text-text-primary text-[length:var(--font-size-display-lg)] font-[var(--font-weight-extrabold)] leading-[var(--line-height-display)] md:text-[length:var(--font-size-display-xl)]">
          {title}
        </h1>
        {subtitle && <p className="text-text-muted mt-2 text-base">{subtitle}</p>}
      </div>
    </section>
  );
}