'use client';

import { Button } from '@/ui/Button';
import { Icon } from '@/ui/Icon';
import { Home, LifeBuoy, RefreshCw } from 'lucide-react';
import React from 'react';

interface RecoveryActionsProps {
  onRetry: () => void;
  onHome: () => void;
}

/**
 * RecoveryActions
 * 
 * Provides primary and secondary recovery paths for the user.
 * Part of the 500 route redesign.
 */
export function RecoveryActions({ onRetry, onHome }: RecoveryActionsProps) {
  return (
    <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.75rem', flexWrap: 'wrap', width: '100%' }}>
      <Button 
        variant="primary" 
        onClick={onRetry}
        icon={<Icon icon={RefreshCw} size={4} />}
      >
        Retry Session
      </Button>
      <Button 
        variant="secondary" 
        onClick={onHome}
        icon={<Icon icon={Home} size={4} />}
      >
        Return to Pits
      </Button>
      <Button 
        variant="secondary" 
        as="a"
        href="https://support.gridpilot.com"
        target="_blank"
        rel="noopener noreferrer"
        icon={<Icon icon={LifeBuoy} size={4} />}
      >
        Contact Support
      </Button>
    </div>
  );
}