import React from 'react';
import classNames from 'classnames';

import { TabPanel as CoreTabPanel } from '@shoptet/ui-core-web';

interface PanelProps {
  id?: string;
  hidden?: boolean;
  keepMounted?: boolean;
  children: React.ReactNode;
}

export const TabPanel = ({ id, hidden, keepMounted, children, ...rest }: PanelProps) => {
  const className = classNames({ 'ui-tabs-panel': !hidden, 'ui-tabs-panel--hidden': hidden });

  if (id) {
    return (
      <CoreTabPanel {...rest} id={id} hidden={hidden} keepMounted={keepMounted} className={className}>
        {children}
      </CoreTabPanel>
    );
  }

  return (
    <div {...rest} className={className}>
      {children}
    </div>
  );
};