import React from 'react';
import { useParams, Navigate } from 'react-router-dom';
import { useStore } from '../src/context/StoreContext';
import BlogPostLayout from '../components/BlogPostLayout';

const ArticleDetail: React.FC = () => {
    const { slug } = useParams<{ slug: string }>();
    const { articles } = useStore();

    const article = articles.find(a => a.slug === slug);

    if (!article) {
        // You might want to show a 404 or just redirect back
        return <Navigate to="/editorial" replace />;
    }

    return (
        <BlogPostLayout
            title={article.title}
            category={article.category || 'Studio Life'}
            date={article.date}
            image={article.image}
            imageAlt={article.title}
        >
            <div className="space-y-12">
                {article.sections && article.sections.length > 0 ? (
                    article.sections.map((section: any) => (
                        <div key={section.id}>
                            {section.type === 'text' ? (
                                <p className="mb-6 leading-relaxed text-lg font-light text-stone-600 dark:text-stone-300">
                                    {section.content}
                                </p>
                            ) : (
                                <div className="my-12">
                                    <img
                                        src={section.content}
                                        alt="Article detail"
                                        className="w-full shadow-lg rounded-sm"
                                    />
                                </div>
                            )}
                        </div>
                    ))
                ) : (
                    <p className="italic text-stone-400">No content available for this article yet.</p>
                )}
            </div>
        </BlogPostLayout>
    );
};

export default ArticleDetail;