/**
 * Blog post detail page.
 *
 * ✅ YOUR CODE - Safe to modify, will not be overwritten.
 * This file was generated once by Prism and is yours to customize.
 */

import type { JSX } from 'react';
import { Link, useParams } from 'react-router-dom';
{% if dark_mode %}import { ThemeToggle } from '../ui/ThemeToggle';
{% endif %}
const APP_NAME = "{{ project_title }}";

export default function BlogPostPage(): JSX.Element {
  const { slug } = useParams<{ slug: string }>();

  return (
    <div className="min-h-screen bg-surface text-foreground">
      {/* Header */}
      <header className="sticky top-0 z-50 bg-surface-elevated/80 backdrop-blur border-b border-border">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex items-center justify-between h-16">
          <Link to="/" className="flex items-center gap-2">
            <div className="w-8 h-8 bg-primary rounded-md flex items-center justify-center">
              <span className="text-white font-bold text-sm">{APP_NAME.charAt(0).toUpperCase()}</span>
            </div>
            <span className="font-semibold text-foreground">{APP_NAME}</span>
          </Link>
          <div className="flex items-center gap-3">
{% if dark_mode %}            <ThemeToggle size="sm" />
{% endif %}            <Link to="/blog" className="btn-ghost text-sm px-4 py-2">Back to Blog</Link>
          </div>
        </div>
      </header>

      {/* Article */}
      <article className="max-w-3xl mx-auto px-4 sm:px-6 lg:px-8 py-16">
        <div className="mb-8">
          <Link to="/blog" className="text-sm text-primary hover:underline">&larr; Back to all posts</Link>
        </div>
        <h1 className="text-3xl sm:text-4xl font-bold text-foreground">
          Blog Post: {slug}
        </h1>
        <div className="mt-4 flex items-center gap-4 text-sm text-muted">
          <span>Team</span>
          <span>&middot;</span>
          <span>{new Date().toLocaleDateString()}</span>
        </div>
        <div className="mt-8 prose prose-slate dark:prose-invert max-w-none">
          <p className="text-muted leading-relaxed">
            This is a placeholder blog post page. Replace this content with your actual blog
            post content. You can fetch posts from a CMS, markdown files, or your API.
          </p>
        </div>
      </article>

      {/* Footer */}
      <footer className="border-t border-border py-8">
        <div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 flex flex-col sm:flex-row items-center justify-between gap-4">
          <div className="flex items-center gap-2">
            <div className="w-6 h-6 bg-primary rounded-md flex items-center justify-center">
              <span className="text-white font-bold text-xs">{APP_NAME.charAt(0).toUpperCase()}</span>
            </div>
            <span className="text-sm font-medium text-foreground">{APP_NAME}</span>
          </div>
          <p className="text-xs text-muted">&copy; {new Date().getFullYear()} {APP_NAME}. All rights reserved.</p>
        </div>
      </footer>
    </div>
  );
}
