import React from 'react';
import type { ReactNode } from 'react';

interface EneonTabsCardProps {
    children: ReactNode;
    className?: string;
}

interface EneonTabsCardHeaderProps {
    children: ReactNode;
    className?: string;
}

interface EneonTabsCardBodyProps {
    children: ReactNode;
    className?: string;
}

export function EneonTabsCard({ children, className = '' }: EneonTabsCardProps): React.ReactElement {
    return (
        <div className={`card eneon-tabs-card ${className}`.trim()}>
            {children}
        </div>
    );
}

export function EneonTabsCardHeader({ children, className = '' }: EneonTabsCardHeaderProps): React.ReactElement {
    return (
        <div className={`card-header eneon-tabs-card__header ${className}`.trim()}>
            {children}
        </div>
    );
}

export function EneonTabsCardBody({ children, className = '' }: EneonTabsCardBodyProps): React.ReactElement {
    return (
        <div className={`card-body eneon-tabs-card__body ${className}`.trim()}>
            {children}
        </div>
    );
}

interface EneonTabPanelProps {
    id: string;
    labelledBy: string;
    active: boolean;
    children: ReactNode;
    className?: string;
}

export function EneonTabPanel({
    id,
    labelledBy,
    active,
    children,
    className = '',
}: EneonTabPanelProps): React.ReactElement | null {
    if (!active) {
        return null;
    }

    return (
        <div
            id={id}
            role="tabpanel"
            aria-labelledby={labelledBy}
            className={`tab-pane fade show active ${className}`.trim()}
        >
            {children}
        </div>
    );
}