/**
 * Approver Performance Empty State Component
 */

import { AlertCircle, ArrowLeft } from 'lucide-react';
import { Card, CardContent } from '@/components/ui/card';
import { Button } from '@/components/ui/button';
import { useNavigate } from 'react-router-dom';

export function ApproverPerformanceEmpty() {
  const navigate = useNavigate();

  return (
    <div className="flex-1 p-3 lg:p-6 overflow-auto min-w-0" data-testid="approver-performance-empty">
      <div className="max-w-7xl mx-auto p-4">
        <Card>
          <CardContent className="p-8 text-center">
            <AlertCircle className="w-12 h-12 text-yellow-500 mx-auto mb-4" />
            <h2 className="text-xl font-semibold mb-2">Approver ID Required</h2>
            <p className="text-gray-600">Please select an approver to view their performance details.</p>
            <Button onClick={() => navigate(-1)} className="mt-4" data-testid="back-button">
              <ArrowLeft className="w-4 h-4 mr-2" />
              Back
            </Button>
          </CardContent>
        </Card>
      </div>
    </div>
  );
}

