import { Head } from "@inertiajs/react";
import { useState } from "react";
import { Container, Nav, Tab, Card } from "react-bootstrap";
import AppLayout from "@/layouts/app-layout";
import PageHeader from "@/components/page-header";
import TabSkpdKode from "./partials/tab-skpd-kode";
import TabSkpdStruktur from "./partials/tab-skpd-struktur";

export default function RefSkpdPage({
    title,
    resourceKode,
    resourceStruktur,
    skpdOptions,
}: any) {
    const [activeTab, setActiveTab] = useState<string>("kode");

    return (
        <AppLayout>
            <Head title={title} />
            <Container fluid className="p-0">
                <PageHeader title={title} />

                <Card className="border-0 shadow-sm">
                    <Card.Header className="pt-3">
                        <Nav
                            variant="pills"
                            activeKey={activeTab}
                            onSelect={(k) => setActiveTab(k || "kode")}
                        >
                            <Nav.Item>
                                <Nav.Link eventKey="kode" role="button">
                                    Kode
                                </Nav.Link>
                            </Nav.Item>
                            <Nav.Item>
                                <Nav.Link eventKey="struktur" role="button">
                                    Struktur
                                </Nav.Link>
                            </Nav.Item>
                        </Nav>
                    </Card.Header>
                    <Card.Body>
                        <Tab.Content>
                            {activeTab === "kode" && (
                                <TabSkpdKode resource={resourceKode} />
                            )}
                            {activeTab === "struktur" && (
                                <TabSkpdStruktur
                                    resource={resourceStruktur}
                                    skpdOptions={skpdOptions}
                                />
                            )}
                        </Tab.Content>
                    </Card.Body>
                </Card>
            </Container>
        </AppLayout>
    );
}
