import React from 'react';
import { useUIKit } from '@tencentcloud/uikit-base-component-react';
import cs from 'classnames';
import { SearchType } from '../../../../types/search';
import styles from './SearchTab.module.scss';
import type { SearchTabProps, SearchTabType } from '../../../../types/search';

interface SearchTabItem {
  key: SearchTabType;
  label: string;
}

export function SearchTab({ activeTab, onTabChange }: SearchTabProps) {
  const { t } = useUIKit();
  const tabs: SearchTabItem[] = [
    { key: 'all', label: t('Search.All') },
    { key: SearchType.MESSAGE, label: t('Search.Messages') },
    { key: SearchType.USER, label: t('Search.Users') },
    { key: SearchType.GROUP, label: t('Search.Groups') },
  ];

  return (
    <div className={styles.SearchTab}>
      {tabs.map(tab => (
        <button
          key={tab.key}
          className={cs(styles.SearchTab__item, {
            [styles['SearchTab__item--active']]: activeTab === tab.key,
          })}
          onClick={() => onTabChange?.(tab.key)}
        >
          {tab.label}
        </button>
      ))}
    </div>
  );
}

export default SearchTab;