ActionRow.tsx

import { DeleteOutlined, CheckCircleOutlined, StopOutlined } from '@ant-design/icons';
import React from 'react';
import { BaseButton } from '@app/components/common/BaseButton/BaseButton';
import { ActionRowContainer } from './ApiKeysTable.style';
import { ApiTableRow } from '@app/api/apiToken.api';

interface ActionRowProps {
  record: ApiTableRow;
  handleToggleRow: (id: number) => void;
  handleDeleteRow: (id: number) => void;
  isCreating?: boolean; // If record.id === -1
  t: (key: string) => string;
}

export const ActionRow: React.FC<ActionRowProps> = ({ 
  record, 
  handleToggleRow, 
  handleDeleteRow,
  isCreating,
  t 
}) => {
  if (isCreating) {
    // If your record has id === -1, you might show a "Create" button or something else
    return (
      <ActionRowContainer>
        <BaseButton className="action-btn" onClick={() => handleToggleRow(record.id)}>
          {t('apiTable.create')}
        </BaseButton>
      </ActionRowContainer>
    );
  }

  // Normal row: show activate/deactivate and delete
  return (
    <ActionRowContainer>
      <BaseButton
        className="action-btn"
        ghost
        onClick={() => handleToggleRow(record.id)}
        icon={record.isActive ? <StopOutlined /> : <CheckCircleOutlined />}
      >
        {record.isActive ? t('apiTable.deactivate') : t('apiTable.activate')}
      </BaseButton>

      <div className="divider" />

      <BaseButton
        className="action-btn delete-btn"
        danger
        onClick={() => handleDeleteRow(record.id)}
        icon={<DeleteOutlined />}
      >
        {t('apiTable.delete')}
      </BaseButton>
    </ActionRowContainer>
  );
};