import { PhotoWithFallback, Button, Breadcrumb } from '../elements';
import MarkdownRenderer from '../elements/markdown-renderer/MarkdownRenderer';
import type { BlogPost } from '../../types/api/blog-post';

interface BlogPostSectionProps {
  blogPost?: BlogPost | null;
}

export const BlogPostSection = ({
  blogPost,
}: BlogPostSectionProps) => {
  if (!blogPost) {
    return (
      <div className="bg-primary text-center py-12">
        <div className="text-6xl mb-4">📝</div>
        <h3 className="font-display text-xl font-normal text-fg-primary mb-2">Blog Post Not Found</h3>
        <p className="font-body text-tertiary mb-4">The blog post you&apos;re looking for doesn&apos;t exist.</p>
        <Button href="/blog">View All Blog Posts</Button>
      </div>
    );
  }

  return (
    <>
      <section className="py-2 md:py-2">
        <div className="mx-auto max-w-container px-4 md:px-8">
          <Breadcrumb 
            backHref="/blog" 
            backLabel="Blog" 
            currentLabel={blogPost.title} 
          />
        </div>
      </section>

      <section>
        <div className="mx-auto max-w-3xl px-4 md:px-8">
          <div className="mb-8">
            {blogPost.published_at && (
              <p className="text-xs font-body font-normal uppercase tracking-widest text-secondary mb-4">
                {new Date(blogPost.published_at).toLocaleDateString('en-US', { month: 'long', day: 'numeric', year: 'numeric' })}
              </p>
            )}
            
            <h1 className="font-display text-5xl font-normal leading-tight text-fg-primary md:text-6xl">
              {blogPost.title}
            </h1>
          </div>

          <div className="aspect-video w-full mb-12">
            <PhotoWithFallback
              item={blogPost}
              fallbackId={blogPost.id}
              alt={blogPost.title}
              className="w-full h-full object-cover"
            />
          </div>

          <div className="prose prose-lg max-w-none font-display text-tertiary">
            <MarkdownRenderer content={blogPost.content_markdown || ''} />
          </div>
        </div>
      </section>
    </>
  );
};

import { registerThemeVariant } from '../../lib/component-registry';
registerThemeVariant('blog-post', 'aman', BlogPostSection);
