import { Link } from 'react-router-dom';
import type { BannerSectionPayload } from '@homaroma/types';
import { useTranslation } from 'react-i18next';
import { getLocalizedField } from '../utils/localization';

interface DynamicBannerProps {
  payload: BannerSectionPayload;
}

export default function DynamicBanner({ payload }: DynamicBannerProps) {
  const { i18n } = useTranslation();
  const lang = i18n.language;
  const { imageUrl, linkUrl } = payload;
  const title = getLocalizedField(payload.title, lang);
  const description = getLocalizedField(payload.description, lang);
  const buttonText = getLocalizedField(payload.buttonText, lang);
  const focalPoint = typeof payload.focalPoint === 'object' && payload.focalPoint ? payload.focalPoint : undefined;
  const imageStyle = focalPoint ? { objectPosition: `${focalPoint.x} ${focalPoint.y}` } : undefined;

  return (
    <section className="ui-section-band bg-pop-bg relative overflow-hidden">
      {linkUrl ? (
        <Link to={linkUrl} className="ui-banner-shell group block cursor-pointer">
          <div className="absolute inset-0 z-0">
            <img
              src={imageUrl}
              className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
              alt={title || "Banner"}
              style={imageStyle}
            />
            <div className="ui-banner-overlay"></div>
          </div>

          <div className="ui-banner-content">
            {title && (
              <h3 className="font-serif text-3xl font-light leading-tight text-pop-pink md:text-5xl">
                {title}
              </h3>
            )}
            {description && (
              <p className="font-light text-base text-pop-bg/95 md:text-lg">
                {description}
              </p>
            )}
            {buttonText && (
              <div className="pt-4">
                <span className="ui-button-secondary">
                  {buttonText}
                </span>
              </div>
            )}
          </div>
        </Link>
      ) : (
        <div className="ui-banner-shell group block cursor-default">
          <div className="absolute inset-0 z-0">
            <img
              src={imageUrl}
              className="w-full h-full object-cover transition-transform duration-700 group-hover:scale-[1.03]"
              alt={title || "Banner"}
              style={imageStyle}
            />
            <div className="ui-banner-overlay"></div>
          </div>

          <div className="ui-banner-content">
            {title && (
              <h3 className="font-serif text-3xl font-light leading-tight text-pop-pink md:text-5xl">
                {title}
              </h3>
            )}
            {description && (
              <p className="font-light text-base text-pop-bg/95 md:text-lg">
                {description}
              </p>
            )}
            {buttonText && (
              <div className="pt-4">
                <span className="ui-button-secondary">
                  {buttonText}
                </span>
              </div>
            )}
          </div>
        </div>
      )}
    </section>
  );
}