import { Button, ButtonGroup, cn } from '@heroui/react';
import { mjChatCls } from '@/utils/cls';

export type EditActionsProps = {
  isUser: boolean;
  isEditing: boolean;
  onSaveEdit: () => void;
  onCancelEdit: () => void;
};

export const EditActions = ({
  isUser,
  isEditing,
  onSaveEdit,
  onCancelEdit,
}: EditActionsProps) => {
  if (!isEditing) return null;

  return (
    <div
      className={mjChatCls(
        ['msg-edit-actions-wrapper'],
        cn(
          `flex w-full row-start-2 col-start-1 col-end-4`,
          isUser ? 'justify-end' : 'justify-start',
        ),
      )}
    >
      <ButtonGroup
        className={mjChatCls(
          ['msg-edit-actions-button-group'],
          'bg-white/15 text-default rounded-full',
        )}
        radius="full"
        size="sm"
        variant="light"
      >
        <Button
          className={mjChatCls(
            ['msg-edit-actions-button', 'msg-edit-actions-button-save'],
            'text-default',
          )}
          size="sm"
          onPress={onSaveEdit}
        >
          保存
        </Button>
        <Button
          className={mjChatCls(
            ['msg-edit-actions-button', 'msg-edit-actions-button-cancel'],
            'text-default',
          )}
          size="sm"
          onPress={onCancelEdit}
        >
          取消
        </Button>
      </ButtonGroup>
    </div>
  );
};