import { SortTypeKeys, SortTypeBoxProps } from '../model/types';
import { useTranslation } from 'react-i18next';

export const SortTypeBox = ({
  sortType,
  onClickToSort,
  sortOptions
}: SortTypeBoxProps) => {
  const { t } = useTranslation();

  const defaultSortOptions = [
    { key: SortTypeKeys.LATEST, label: t('filter.sortOrders.latest') },
    { key: SortTypeKeys.HIGH_AMOUNT, label: t('filter.sortOrders.highest') }
  ];

  const options = sortOptions || defaultSortOptions;

  return (
    <>
      <div className="sort-options">
        { options.map((value: Record<string, any>, index: number) => (
          <>
          { (index > 0) && 
            <span 
              key={ value.key + '-divider' } 
              className="sort-divider"
            >|</span>
          }
            <span key={ value.key }>
              <button
                className={ `sort-btn ${(sortType === value.key)? 'active': ''}` }
                onClick={ () => onClickToSort(value.key) }
              >{ value.label }</button>
            </span>
          </>
        ))}
      </div>
    </>
  );
};