'use client'
import { useState } from "react";

export interface Tab {
    menu_item_id: string;
    menu_title?: string
    actual_post_title: string;
    items: Tab[]
    custom_url: string
    slug: string
}

interface VerticalTabsProps {
    tabs: Tab[];
    defaultTab?: string;
}

export function VerticalTabs({ tabs, defaultTab }: VerticalTabsProps) {
    const [activeTab, setActiveTab] = useState(defaultTab || tabs[0]?.menu_item_id);

    return (
        <div className="flex h-full min-h-100 w-full rounded-lg border border-gray-200 bg-white shadow-sm">
            {/* Tabs on the left */}
            <ul className="flex w-auto menu flex-col border-r border-gray-200">
                {tabs.map((tab) => (
                    <li
                        key={tab.menu_item_id}
                        tabIndex={0}
                        onClick={() => setActiveTab(tab.menu_item_id)}
                        onMouseEnter={() => setActiveTab(tab.menu_item_id)}
                    >
                        <a>{tab.actual_post_title}</a>
                    </li>
                ))}
            </ul>

            {/* Content on the right */}
            <div className="flex-1 overflow-auto">
                {tabs.map((tab) => (
                    <div
                        key={tab.menu_item_id}
                        className={`transition-opacity duration-200 ${activeTab === tab.menu_item_id ? 'visible opacity-100' : 'invisible absolute opacity-0'}`}
                    >
                        <ul className="w-full h-auto menu bg-base-200 rounded-box">
                            <li className="menu-title">
                                {tab.actual_post_title}
                            </li>
                            {tab.items.map((item: Tab) => (
                                <li key={item.menu_item_id}>
                                    <a href={item.custom_url || item.slug}>
                                        {item.actual_post_title}
                                    </a>
                                </li>
                            ))}
                        </ul>
                    </div>
                ))}
            </div>
        </div>
    );
}