﻿import React from 'react';
import { Head, Link } from '@inertiajs/react';
import { PublicLayout } from '@/Layouts/PublicLayout';
import { ChevronRight, Calendar, ArrowLeft } from 'lucide-react';

interface Props {
    post: any;
    relatedPosts: any[];
}

export default function JournalPost({ post, relatedPosts = [] }: Props) {
    return (
        <PublicLayout>
            <Head title={`${post.title} — Primon Journal`} />

            <section className="py-24 bg-[#1A1A1A] text-[#FBF9F5] border-b border-[#C5A880]/20">
                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-4">
                    <div className="flex items-center gap-2 text-xs uppercase tracking-wider text-gray-400">
                        <Link href="/journal" className="hover:text-white">Journal</Link>
                        <ChevronRight className="h-3 w-3" />
                        <span className="text-[#C5A880]">{post.category}</span>
                    </div>

                    <h1 className="font-serif text-3xl sm:text-5xl font-light text-white leading-tight">
                        {post.title}
                    </h1>

                    <p className="text-sm text-gray-300 font-light max-w-2xl leading-relaxed">
                        {post.excerpt}
                    </p>
                </div>
            </section>

            <section className="py-16 bg-[#FBF9F5]">
                <div className="max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 space-y-12">
                    {post.featured_image && (
                        <div className="h-96 sm:h-[480px] rounded-3xl overflow-hidden shadow-2xl border border-[#C5A880]/20">
                            <img
                                src={post.featured_image}
                                alt={post.title}
                                className="w-full h-full object-cover"
                            />
                        </div>
                    )}

                    <article className="prose prose-lg max-w-none text-gray-800 font-light leading-relaxed space-y-6 text-sm sm:text-base">
                        <p className="whitespace-pre-line">
                            {post.body}
                        </p>
                    </article>

                    <div className="pt-10 border-t border-gray-200 flex items-center justify-between">
                        <Link
                            href="/journal"
                            className="inline-flex items-center gap-2 text-xs font-semibold uppercase tracking-wider text-[#1A1A1A] hover:text-[#C5A880] transition-colors"
                        >
                            <ArrowLeft className="h-4 w-4" />
                            <span>Back to All Stories</span>
                        </Link>
                        <Link
                            href="/booking"
                            className="bg-[#1A1A1A] hover:bg-[#C5A880] hover:text-[#1A1A1A] text-[#FBF9F5] px-6 py-2.5 rounded-full text-xs font-semibold uppercase tracking-wider transition-all"
                        >
                            Book Your Stay
                        </Link>
                    </div>
                </div>
            </section>
        </PublicLayout>
    );
}
