import React from 'react';
import { Head, usePage } from '@inertiajs/react';
import GuestLayout from '@/Layouts/GuestLayout';
import parse from 'html-react-parser';
import useTranslation from '@/hooks/useTranslation'; 

export default function Show({ page }) {
    const { t } = useTranslation(); 
    const { locale } = usePage().props; 

    const formatDate = (dateString) => {
        // Use the browser's Intl API for better locale support
        try {
            return new Intl.DateTimeFormat(locale.replace('_', '-'), { 
                year: 'numeric', 
                month: 'long', 
                day: 'numeric' 
            }).format(new Date(dateString));
        } catch (e) {
            // Fallback for simple date
            return new Date(dateString).toLocaleDateString();
        }
    };

    return (
        // The GuestLayout already handles SPA links and RTL direction on the root element
        <>
            <Head title={page.title} />

            <div className="bg-background min-h-screen pb-20">
                <div className="container mx-auto px-4 sm:px-6 lg:px-8 py-12 max-w-4xl">
                    
                    {/* Page Header */}
                    <header className="mb-10 border-b border-border pb-8">
                        <h1 className="text-3xl md:text-5xl font-extrabold tracking-tight text-foreground mb-4">
                            {page.title}
                        </h1>
                        <div className="text-sm text-muted-foreground">
                            {t('_last_updated', 'Last Updated')}: {formatDate(page.updated_at)}
                        </div>
                    </header>

                    {/* Page Content */}
                    <article className="prose prose-lg dark:prose-invert max-w-none 
                        prose-headings:font-bold prose-headings:text-foreground
                        prose-p:text-muted-foreground prose-p:leading-relaxed
                        prose-a:text-primary hover:prose-a:underline
                        prose-img:rounded-xl prose-img:shadow-sm
                        prose-strong:text-foreground
                        prose-ul:list-disc prose-ol:list-decimal">
                        
                        {/* The 'prose' class automatically handles RTL text direction */}
                        {parse(page.content || '')}
                        
                    </article>

                </div>
            </div>
        </>
    );
}

Show.layout = page => <GuestLayout children={page} />;