'use client';

import { Card, CardContent } from '@/components/ui/Card';

interface Message {
  type: 'success' | 'error';
  text: string;
}

interface QuickActionsProps {
  onCreateBackup: () => void;
  onTestJira: () => void;
  isBackupLoading: boolean;
  isJiraTestLoading: boolean;
  jiraEnabled: boolean;
  messages: {
    backup?: Message;
    jira?: Message;
  };
}

export function QuickActions({
  onCreateBackup,
  onTestJira,
  isBackupLoading,
  isJiraTestLoading,
  jiraEnabled,
  messages,
}: QuickActionsProps) {
  return (
    <div className="mt-8">
      <h2 className="text-xl font-semibold text-[var(--foreground)] mb-4">
        Actions rapides
      </h2>

      <div className="grid grid-cols-1 md:grid-cols-2 gap-4">
        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <h3 className="font-medium mb-1">Sauvegarde manuelle</h3>
                <p className="text-sm text-[var(--muted-foreground)]">
                  Créer une sauvegarde des données
                </p>
                {messages.backup && (
                  <p
                    className="text-xs mt-1"
                    style={{
                      color:
                        messages.backup.type === 'success'
                          ? 'var(--success)'
                          : 'var(--destructive)',
                    }}
                  >
                    {messages.backup.text}
                  </p>
                )}
              </div>
              <button
                onClick={onCreateBackup}
                disabled={isBackupLoading}
                className="px-3 py-1.5 bg-[var(--primary)] text-[var(--primary-foreground)] rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {isBackupLoading ? 'En cours...' : 'Sauvegarder'}
              </button>
            </div>
          </CardContent>
        </Card>

        <Card>
          <CardContent className="p-4">
            <div className="flex items-center justify-between">
              <div>
                <h3 className="font-medium mb-1">Test Jira</h3>
                <p className="text-sm text-[var(--muted-foreground)]">
                  Tester la connexion Jira
                </p>
                {messages.jira && (
                  <p
                    className="text-xs mt-1"
                    style={{
                      color:
                        messages.jira.type === 'success'
                          ? 'var(--success)'
                          : 'var(--destructive)',
                    }}
                  >
                    {messages.jira.text}
                  </p>
                )}
              </div>
              <button
                onClick={onTestJira}
                disabled={!jiraEnabled || isJiraTestLoading}
                className="px-3 py-1.5 bg-[var(--card)] text-[var(--foreground)] border border-[var(--border)] rounded text-sm disabled:opacity-50 disabled:cursor-not-allowed"
              >
                {isJiraTestLoading ? 'Test...' : 'Tester'}
              </button>
            </div>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}
