feishin/src/renderer/features/shared/components/order-toggle-button.tsx

import { useTranslation } from 'react-i18next';

import { ActionIcon, ActionIconProps } from '/@/shared/components/action-icon/action-icon';
import { SortOrder } from '/@/shared/types/domain-types';

interface OrderToggleButtonProps {
    buttonProps?: Partial<ActionIconProps>;
    disabled?: boolean;
    onToggle: () => void;
    sortOrder: SortOrder;
}

export const OrderToggleButton = ({
    buttonProps,
    disabled,
    onToggle,
    sortOrder,
}: OrderToggleButtonProps) => {
    const { t } = useTranslation();

    return (
        <ActionIcon
            disabled={disabled}
            icon={sortOrder === SortOrder.ASC ? 'sortAsc' : 'sortDesc'}
            iconProps={{
                size: 'lg',
            }}
            onClick={onToggle}
            tooltip={{
                label:
                    sortOrder === SortOrder.ASC
                        ? t('common.ascending', { postProcess: 'sentenceCase' })
                        : t('common.descending', { postProcess: 'sentenceCase' }),
            }}
            variant="subtle"
            {...buttonProps}
        />
    );
};