import { h, Component } from 'preact';

import styles from './css/index.less';

interface ActGoodsTabProps {
  goodsStatusType?: Array<{
    text?: string;
  }>;
  mGoodsSelectTab?: number;
  goodsSelectTabClick?: (tab: any, index: number) => void;
}

export default class ActGoodsTab extends Component<ActGoodsTabProps, {}> {
  render() {
    const { goodsStatusType = [], mGoodsSelectTab, goodsSelectTabClick = (() => {}) } = this.props;
    return (
      <div className={`${styles['tabs-container']}`}>
        {goodsStatusType.length > 0 && (
        <div className={styles['tabs-header']}>
          {goodsStatusType.map((tab, index) => (
            <div
              key={index}
              className={`${styles['tab-item']} ${mGoodsSelectTab === index ?   `${styles['tab-item-active']}` : ''} `}
              onClick={() => goodsSelectTabClick(tab, index)}
            >
              {tab.text}
            </div>
          ))}
        </div>
        )}
      </div>
    );
  }
}