import React from 'react'; import { Head, Link } from '@inertiajs/react'; import { useLocalizedRoutes } from '@/hooks/useLocalizedRoutes'; import { useTranslation } from 'react-i18next'; import MarketingLayout from '@/layouts/mainWebsite'; import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'; import { Badge } from '@/components/ui/badge'; import { Separator } from '@/components/ui/separator'; import { Button } from '@/components/ui/button'; interface Props { posts: { data: any[]; links: any[]; current_page: number; last_page: number; }; } const Blog: React.FC = ({ posts }) => { const { localizedPath } = useLocalizedRoutes(); const { t, i18n } = useTranslation('marketing'); const locale = i18n.language || 'de'; // Fallback to 'de' if no locale 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); if (!href) { return ( ); })}
); }; return ( {/* Hero Section */}

{t('blog.hero_title')}

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

{t('blog.posts_title')}

{posts.data.length > 0 ? ( <>
{posts.data.map((post) => ( {post.featured_image && (
{post.title}
)} {post.title?.[locale] || post.title?.de || post.title || 'No Title'}

{post.excerpt?.[locale] || post.excerpt?.de || post.excerpt || 'No Excerpt'}

{t('blog.by')} {post.author?.name?.[locale] || post.author?.name?.de || post.author?.name || t('blog.team')} {t('blog.published_at')} {new Date(post.published_at).toLocaleDateString('de-DE', { day: 'numeric', month: 'long', year: 'numeric' })}
))}
{renderPagination()} ) : (

{t('blog.empty')}

 )}
); }; export default Blog;