import { Head } from '@inertiajs/react';
import { usePersonalizer } from '@/hooks/usePersonalizer';

interface Props {
    title: string;
    content: string;
}

export default function LegalPage({ title, content }: Props) {
    const { settings } = usePersonalizer();
    const logoUrl = settings.branding.default_logo ?? null;
    const appName = settings.login.login_app_name || 'App';

    return (
        <>
            <Head title={title} />
            <div className="min-h-screen bg-gray-50">
                {/* Header */}
                <header className="border-b bg-white shadow-sm">
                    <div className="mx-auto flex max-w-4xl items-center gap-3 px-6 py-4">
                        {logoUrl && (
                            <img src={logoUrl} alt={appName} className="h-8 w-auto object-contain" />
                        )}
                        <span className="text-sm font-medium text-gray-600">{appName}</span>
                    </div>
                </header>

                {/* Content */}
                <main className="mx-auto max-w-4xl px-6 py-10">
                    <h1 className="mb-6 text-3xl font-bold text-gray-900">{title}</h1>
                    <div
                        className="prose prose-sm max-w-none rounded-xl bg-white p-8 shadow-sm
                            prose-headings:font-semibold prose-headings:text-gray-900
                            prose-h1:text-2xl prose-h2:text-xl prose-h3:text-lg
                            prose-p:leading-relaxed prose-p:text-gray-700
                            prose-a:text-primary prose-a:underline
                            prose-li:my-0.5 prose-li:text-gray-700
                            prose-strong:text-gray-900"
                        dangerouslySetInnerHTML={{ __html: content }}
                    />
                </main>

                {/* Footer */}
                <footer className="mt-10 border-t bg-white py-6 text-center text-xs text-gray-400">
                    &copy; {new Date().getFullYear()} {appName}. All rights reserved.
                </footer>
            </div>
        </>
    );
}
