import React from 'react'; import { Head, Link } from '@inertiajs/react'; import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes'; import { useTranslation } from 'react-i18next'; import MarketingLayout from '@/layouts/marketing/MarketingLayout'; interface Props { posts: { data: any[]; links: any[]; current_page: number; last_page: number; }; } const Blog: React.FC = ({ posts }) => { const { localizedPath } = useLocalizedRoutes(); const { t } = useTranslation('marketing'); const resolvePaginationHref = React.useCallback( (raw?: string | null) => { if (!raw) { return null; } try { const parsed = new URL( raw, typeof window !== 'undefined' ? window.location.origin : 'http://localhost' ); const normalized = `${parsed.pathname}${parsed.search}`; return localizedPath(normalized); } catch (error) { console.warn('[Marketing Blog] Fallback resolving pagination link', { raw, error }); return localizedPath(raw); } }, [localizedPath] ); const renderPagination = () => { if (!posts.links || posts.links.length <= 3) return null; return (
{posts.links.map((link, index) => { const href = resolvePaginationHref(link.url); const baseClasses = `px-3 py-2 rounded ${ link.active ? 'bg-[#FFB6C1] text-white' : 'bg-gray-200 text-gray-700 hover:bg-gray-300' }`; if (!href) { return ( ); } return ( ); })}
); }; return ( {/* Hero Section */}

{t('blog.hero_title')}

{t('blog.hero_description')}

{t('blog.hero_cta')}
{/* Posts Section */}

{t('blog.posts_title')}

{posts.data.length > 0 ? ( <>
{posts.data.map((post) => (
{post.featured_image && ( {post.title} )}

{post.title}

{post.excerpt}

{t('blog.by')} {post.author?.name || t('blog.team')} | {t('blog.published_at')} {post.published_at}

{t('blog.read_more')}
))}
{renderPagination()} ) : (

{t('blog.empty')}

)}
); }; export default Blog;