import React from 'react';
import { Link, usePage } from '@inertiajs/react';
import { useTranslation } from 'react-i18next';
import MarketingLayout from '@/layouts/mainWebsite';
import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes';

type LegalShowProps = {
  seoTitle: string;
  title: string;
  content: string;
  effectiveFrom?: string | null;
  effectiveFromLabel?: string | null;
  versionLabel?: string | null;
  slug: string;
};

const LegalShow: React.FC<LegalShowProps> = (props) => {
  const { seoTitle, title, content, effectiveFromLabel, versionLabel, slug } = props;
  const { t } = useTranslation('marketing');
  const { localizedPath } = useLocalizedRoutes();
  const { auth } = usePage<{ auth?: { user?: { id?: number } | null } }>().props;
  const showWithdrawalAction = slug === 'widerrufsbelehrung' && Boolean(auth?.user);

  return (
    <MarketingLayout title={seoTitle}>

      <section className="bg-white py-16">
        <div className="mx-auto max-w-4xl px-6">
          <header className="mb-10">
            <p className="text-sm uppercase tracking-[0.2em] text-gray-400">
              Die Fotospiel App
            </p>
            <h1 className="mt-2 text-3xl font-semibold text-gray-900 md:text-4xl">
              {title}
            </h1>
            {(effectiveFromLabel || versionLabel) && (
              <p className="mt-3 text-sm text-gray-500">
                {[effectiveFromLabel, versionLabel].filter(Boolean).join(' · ')}
              </p>
            )}
          </header>

          {showWithdrawalAction && (
            <div className="mb-10 rounded-2xl border border-pink-200/60 bg-pink-50 p-6">
              <h2 className="text-lg font-semibold text-gray-900">
                {t('withdrawal.cta_title')}
              </h2>
              <p className="mt-2 text-sm text-gray-600">
                {t('withdrawal.cta_body')}
              </p>
              <Link
                href={localizedPath('/widerruf')}
                className="mt-4 inline-flex items-center justify-center rounded-full bg-gray-900 px-5 py-2 text-sm font-semibold text-white transition hover:bg-gray-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-900"
              >
                {t('withdrawal.cta_button')}
              </Link>
            </div>
          )}

          <article
            className="prose prose-slate max-w-none prose-headings:font-display"
            dangerouslySetInnerHTML={{ __html: content }}
          />
        </div>
      </section>
    </MarketingLayout>
  );
};

LegalShow.layout = (page: React.ReactNode) => page;

export default LegalShow;