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

interface NewsItem {
    id: number;
    title: string;
    body: string;
    image_path: string | null;
    published_at: string;
    author: { name: string } | null;
}

interface Props {
    news: {
        data: NewsItem[];
        links: { url: string | null; label: string; active: boolean }[];
    };
}

export default function News({ news }: Props) {
    return (
        <PublicLayout>
            <Head title="News" />
            <h1 className="mb-6 text-2xl font-bold">News</h1>

            <div className="space-y-4">
                {news.data.map((item) => (
                    <Link
                        key={item.id}
                        href={route('news.show', item.id)}
                        className="block rounded-lg bg-gray-900 p-5 ring-1 ring-white/10 hover:ring-brand-500"
                    >
                        <h2 className="text-lg font-semibold">{item.title}</h2>
                        <p className="mt-1 text-sm text-gray-400">
                            {item.author?.name ?? 'Staff'} · {new Date(item.published_at).toLocaleDateString()}
                        </p>
                    </Link>
                ))}

                {news.data.length === 0 && <p className="text-gray-400">No news posts yet.</p>}
            </div>

            <div className="mt-6 flex flex-wrap gap-1">
                {news.links.map((link, i) => (
                    <Link
                        key={i}
                        href={link.url ?? '#'}
                        // Safe here only because `label` is a fixed string
                        // Laravel's own paginator generates ("&laquo;
                        // Previous" / page numbers) — never user-supplied
                        // content. News titles/bodies are rendered as plain
                        // JSX text elsewhere on this page, which React
                        // escapes automatically.
                        dangerouslySetInnerHTML={{ __html: link.label }}
                        className={`rounded-md px-3 py-1 text-sm ${
                            link.active ? 'bg-brand-600 text-white' : 'bg-gray-900 text-gray-400 hover:bg-gray-800'
                        } ${!link.url ? 'pointer-events-none opacity-40' : ''}`}
                    />
                ))}
            </div>
        </PublicLayout>
    );
}
