import React from 'react';
import { Head, Link, usePage } from '@inertiajs/react';
import MarketingLayout from '@/layouts/marketing/MarketingLayout';

interface Props {
  post: {
    id: number;
    title: string;
    excerpt?: string;
    content: string;
    featured_image?: string;
    published_at: string;
    author?: { name: string };
    slug: string;
  };
}

const BlogShow: React.FC<Props> = ({ post }) => {
  return (
    <MarketingLayout title={`${post.title} - Fotospiel Blog`}>
      <Head title={`${post.title} - Fotospiel Blog`} />
      {/* Hero Section */}
      <section className="bg-gradient-to-r from-[#FFB6C1] via-[#FFD700] to-[#87CEEB] text-white py-20 px-4">
        <div className="container mx-auto text-center">
          <h1 className="text-4xl md:text-5xl font-bold mb-4">{post.title}</h1>
          <p className="text-lg mb-8">
            Von {post.author?.name || 'Dem Fotospiel Team'} | {new Date(post.published_at).toLocaleDateString('de-DE')}
          </p>
          {post.featured_image && (
            <img
              src={post.featured_image}
              alt={post.title}
              className="mx-auto rounded-lg shadow-lg max-w-2xl"
            />
          )}
        </div>
      </section>

      {/* Post Content */}
      <section className="py-20 px-4 bg-white">
        <div className="container mx-auto max-w-4xl prose prose-lg max-w-none">
          <div dangerouslySetInnerHTML={{ __html: post.content }} />
        </div>
      </section>

      {/* Back to Blog */}
      <section className="py-10 px-4 bg-gray-50">
        <div className="container mx-auto text-center">
          <Link
            href="/blog"
            className="bg-[#FFB6C1] text-white px-8 py-3 rounded-full font-semibold hover:bg-[#FF69B4] transition"
          >
            Zurück zum Blog
          </Link>
        </div>
      </section>
    </MarketingLayout>
  );
};

export default BlogShow;