import React from 'react'

interface EditingControlsProps {
  onSave: () => void
  onCancel: () => void
  isSaving?: boolean
  className?: string
}

export const EditingControls: React.FC<EditingControlsProps> = ({
  onSave,
  onCancel,
  isSaving = false,
  className = ''
}) => {
  return (
    <div className={`px-6 pb-6 ${className}`}>
      <div className="flex gap-3">
        <button
          onClick={onSave}
          disabled={isSaving}
          className="flex-1 bg-green-600 text-white py-3 rounded-lg font-medium hover:bg-green-700 transition-colors flex items-center justify-center gap-2 disabled:opacity-50 disabled:cursor-not-allowed"
        >
          {isSaving ? (
            <>
              <div className="animate-spin rounded-full h-4 w-4 border-b-2 border-white"></div>
              儲存中...
            </>
          ) : (
            <>
              <svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
              </svg>
              保存修改
            </>
          )}
        </button>
        <button
          onClick={onCancel}
          disabled={isSaving}
          className="flex-1 bg-gray-500 text-white py-3 rounded-lg font-medium hover:bg-gray-600 transition-colors disabled:opacity-50 disabled:cursor-not-allowed"
        >
          取消編輯
        </button>
      </div>
    </div>
  )
}