import { useState, type ReactElement } from "react";
import CurrentActivity from "../components/CurrentActivity";
import About from "../components/About";

interface Section {
    id: string;
    title: string;
    content: ReactElement;
}

export default function Home(): ReactElement {
    const [activeTab, setActiveTab] = useState<string>("about");

    const sections: Section[] = [
        {
            id: "about",
            title: "About",
            content: (
                <>
                    <About />
                </>
            ),
        },
        {
            id: "current-activity",
            title: "Current-activity",
            content: (
                <>
                    <CurrentActivity />
                </>
            ),
        },
    ];

    return (
        <div className="text-ctp-text flex flex-col items-center justify-center px-6 py-6">
            <div className="w-full max-w-6xl text-center">
                <h1 className="text-4xl font-bold text-ctp-mauve">
                    AramJonghu
                </h1>
                <div className="mt-10 border rounded p-4">
                    <div className="flex flex-wrap justify-center gap-12 mb-6">
                        {sections.map((section) => (
                            <button
                                key={section.id}
                                onClick={() => setActiveTab(section.id)}
                                className={`ui-btn ${
                                    activeTab === section.id
                                        ? "ui-btn-active"
                                        : ""
                                }`}
                            >
                                {section.title}
                            </button>
                        ))}
                    </div>
                    <div className="mt-6 text-left relative min-h-20">
                        {sections.map((section) => (
                            <div
                                key={section.id}
                                className={`transition-all duration-300 ${
                                    activeTab === section.id
                                        ? "opacity-100 translate-y-0"
                                        : "opacity-0 -translate-y-2 pointer-events-none absolute inset-0"
                                }`}
                            >
                                {section.content}
                            </div>
                        ))}
                    </div>
                </div>
            </div>
        </div>
    );
}
