import { useState } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import HFTable from '../components/header-footer/HFTable';
import HFModal from '../components/header-footer/HFModal';
import { Button, TabPanel } from '@wordpress/components';

const HeaderFooterBuilder = () => {
    const [isModalOpen, setIsModalOpen] = useState(false);
    const [refresh, setRefresh] = useState(0);

    const onSelectTab = (tabName) => {
        // Logic if needed
    };

    return (
        <div className="storebuild-hf-builder storebuild-wrapper">
             <div className="mt-6 mb-4 flex items-center justify-between">
                <h1 className="text-2xl font-bold">{__('Header Footer Builder', 'shopbuild')}</h1>
                <Button variant="primary" onClick={() => setIsModalOpen(true)}>
                    {__('Create Header/Footer', 'shopbuild')}
                </Button>
            </div>
            
            <div className="storebuild-content bg-white p-6 rounded-lg shadow-sm">
                <TabPanel
                    className="storebuild-hf-tabs"
                    activeClass="is-active"
                    initialTabName="header"
                    onSelect={onSelectTab}
                    tabs={[
                        {
                            name: 'header',
                            title: __('Header', 'shopbuild'),
                            className: 'tab-header',
                        },
                        {
                            name: 'footer',
                            title: __('Footer', 'shopbuild'),
                            className: 'tab-footer',
                        },
                        {
                            name: 'megamenu',
                            title: __('Mega Menu', 'shopbuild'),
                            className: 'tab-megamenu',
                        },
                    ]}
                >
                    {
                        (tab) => <HFTable type={tab.name} key={tab.name + refresh} />
                    }
                </TabPanel>
            </div>

            {isModalOpen && (
                <HFModal 
                    onRequestClose={() => setIsModalOpen(false)} 
                    onSuccess={() => {
                        setIsModalOpen(false);
                        setRefresh(prev => prev + 1);
                    }}
                />
            )}
        </div>
    );
};

export default HeaderFooterBuilder;