import clsx from 'clsx';
import { Paragraph } from '../../01-atoms';
/**
 * TabItem component for rendering a tab item with optional icon and active state.
 *
 * @component
 * @example
 * // Example usage of TabItem component
 * <TabItem
 *   icon={<SomeIcon />}
 *   isActive={true}
 *   className="custom-class"
 * >
 *   Tab Content
 * </TabItem>
 *
 * @param {Object} props - The properties of the TabItem component.
 * @param {ReactNode|string} [props.icon] - Optional icon to display alongside the tab content.
 * @param {boolean} [props.isActive] - Whether the tab item is currently active.
 * @param {ReactNode} props.children - The content to be displayed inside the tab item.
 * @param {Object} [props.restProps] - Additional HTML attributes for the container div.
 *
 * @returns {ReactNode} The rendered TabItem component.
 */
export function TabItem({ children, icon, isActive, ...restProps }) {
    return (<div {...restProps} className={clsx('relative z-10 inline-block w-full cursor-pointer py-2', isActive &&
            'before:bg-lavender before:absolute before:bottom-0 before:left-0 before:block before:h-[2.5px] before:w-full', restProps.className)}>
      {!!icon && icon}
      <Paragraph>{children}</Paragraph>
    </div>);
}
//# sourceMappingURL=TabItem.jsx.map