'use client';
import { getTranslation } from '@payloadcms/translations';
import React, { useState } from 'react';
import { ErrorPill } from '../../../../elements/ErrorPill/index.js';
import { useTranslation } from '../../../../providers/Translation/index.js';
import { WatchChildErrors } from '../../../WatchChildErrors/index.js';
const baseClass = 'tabs-field__tab-button';
export const TabComponent = ({ isActive, parentPath, setIsActive, tab })=>{
    const { name, label } = tab;
    const { i18n } = useTranslation();
    const [errorCount, setErrorCount] = useState(undefined);
    const hasName = 'name' in tab;
    const path = `${parentPath ? `${parentPath}.` : ''}${'name' in tab ? name : ''}`;
    const fieldHasErrors = errorCount > 0;
    return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(WatchChildErrors, {
        fieldMap: tab.subfields,
        path: path,
        setErrorCount: setErrorCount
    }), /*#__PURE__*/ React.createElement("button", {
        className: [
            baseClass,
            fieldHasErrors && `${baseClass}--has-error`,
            isActive && `${baseClass}--active`
        ].filter(Boolean).join(' '),
        onClick: setIsActive,
        type: "button"
    }, label ? getTranslation(label, i18n) : hasName && name, fieldHasErrors && /*#__PURE__*/ React.createElement(ErrorPill, {
        count: errorCount,
        i18n: i18n
    })));
};

//# sourceMappingURL=index.js.map