import React from 'react';
import { SendHorizontal, Loader2 } from 'lucide-react';
import { Button } from '@/components/ui/button';

interface ComposeEmailFooterProps {
  sending: boolean;
  onSend: () => Promise<void>;
  onCancel: () => void;
}

export default function ComposeEmailFooter({
  sending,
  onSend,
  onCancel
}: ComposeEmailFooterProps) {
  return (
    <div className="p-4 border-t border-gray-200 flex justify-between items-center">
      <div className="flex space-x-2">
        <Button
          type="button"
          onClick={onSend}
          disabled={sending}
          className="bg-blue-600 hover:bg-blue-700"
        >
          {sending ? (
            <>
              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
              Sending...
            </>
          ) : (
            <>
              <SendHorizontal className="mr-2 h-4 w-4" />
              Send
            </>
          )}
        </Button>
        
        <Button
          type="button"
          variant="outline"
          onClick={onCancel}
          disabled={sending}
        >
          Cancel
        </Button>
      </div>
      
      <div className="text-xs text-gray-500">
        {sending ? 'Sending your email...' : 'Ready to send'}
      </div>
    </div>
  );
}