import React from 'react';
import postArchiveScript from '../clientJS/post-archive' with { type: "text" };
import { minifyJS } from '../utils';

export function PostArchive() {
    const archiveData = [
        {
            year: "2025",
            count: "(8)",
            months: [
                {
                    name: "October",
                    count: "(3)",
                    posts: [
                        { title: "Building a Modern Blog", href: "/blog/post-1" },
                        { title: "TypeScript Tips & Tricks", href: "/blog/post-2" },
                        { title: "Designing Better UIs", href: "/blog/post-3" }
                    ]
                },
                {
                    name: "September",
                    count: "(5)",
                    posts: [
                        { title: "Getting Started with Bun", href: "/blog/post-4" },
                        { title: "Web Performance Optimization", href: "/blog/post-5" },
                        { title: "CSS Grid vs Flexbox", href: "/blog/post-6" },
                        { title: "JavaScript Best Practices", href: "/blog/post-7" },
                        { title: "Accessibility Matters", href: "/blog/post-8" }
                    ]
                }
            ]
        },
        {
            year: "2024",
            count: "(12)",
            months: [
                {
                    name: "December",
                    count: "(4)",
                    posts: [
                        { title: "Year in Review 2024", href: "/blog/post-9" },
                        { title: "Holiday Coding Projects", href: "/blog/post-10" },
                        { title: "New Year Resolutions", href: "/blog/post-11" },
                        { title: "Reflecting on Growth", href: "/blog/post-12" }
                    ]
                },
                {
                    name: "June",
                    count: "(8)",
                    posts: [
                        { title: "Summer Tech Trends", href: "/blog/post-13" },
                        { title: "Remote Work Tips", href: "/blog/post-14" },
                        { title: "Learning Resources", href: "/blog/post-15" },
                        { title: "Code Review Best Practices", href: "/blog/post-16" },
                        { title: "Git Workflow Tips", href: "/blog/post-17" },
                        { title: "Docker for Beginners", href: "/blog/post-18" },
                        { title: "API Design Patterns", href: "/blog/post-19" },
                        { title: "Testing Strategies", href: "/blog/post-20" }
                    ]
                }
            ]
        }
    ];

    return (
        <div className="postList sheet-background">
            <h3>Posts</h3>
            <ul className="post-archive">
                {archiveData.map((yearData) => (
                    <li key={yearData.year}>
                        <div className="archive-year">
                            <span className="archive-toggle">▶</span>
                            <span>{yearData.year}</span>
                            <span className="post-count">{yearData.count}</span>
                        </div>
                        <div className="archive-content">
                            <ul className="archive-months">
                                {yearData.months.map((monthData) => (
                                    <li key={monthData.name}>
                                        <div className="archive-month">
                                            <span className="archive-toggle">▶</span>
                                            <span>{monthData.name}</span>
                                            <span className="post-count">{monthData.count}</span>
                                        </div>
                                        <div className="archive-content">
                                            <ul className="archive-posts">
                                                {monthData.posts.map((post) => (
                                                    <li key={post.href} className="archive-post">
                                                        <a href={post.href}>{post.title}</a>
                                                    </li>
                                                ))}
                                            </ul>
                                        </div>
                                    </li>
                                ))}
                            </ul>
                        </div>
                    </li>
                ))}
            </ul>
            <script dangerouslySetInnerHTML={{ __html: minifyJS(postArchiveScript) }} />
        </div>
    )
}