import { Head } from '@inertiajs/react';
import PublicLayout from '@/Layouts/PublicLayout';

interface Props {
    news: {
        title: string;
        body: string;
        image_path: string | null;
        published_at: string;
        author: { name: string } | null;
    };
}

export default function NewsShow({ news }: Props) {
    return (
        <PublicLayout>
            <Head title={news.title} />

            <article className="rounded-lg bg-gray-900 p-6 ring-1 ring-white/10">
                {news.image_path && (
                    <img src={news.image_path} alt="" className="mb-4 max-h-80 w-full rounded-md object-cover" />
                )}
                <h1 className="text-2xl font-bold">{news.title}</h1>
                <p className="mt-1 text-sm text-gray-400">
                    {news.author?.name ?? 'Staff'} · {new Date(news.published_at).toLocaleDateString()}
                </p>
                {/* `body` is plain text rendered as a JSX child, not raw
                    HTML — React escapes it automatically, closing the
                    unauthenticated stored-XSS hole the legacy news
                    feature had end to end. */}
                <p className="mt-4 whitespace-pre-line text-gray-200">{news.body}</p>
            </article>
        </PublicLayout>
    );
}
