'use client';

import { Check, X } from 'lucide-react';
import { Button } from '@/components/ui/button';

interface ReviewResultPanelProps {
  approved: boolean;
  reason: string;
  onSave: () => void;
  onContinueEditing: () => void;
  isSaving: boolean;
}

export function ReviewResultPanel({
  approved,
  reason,
  onSave,
  onContinueEditing,
  isSaving,
}: ReviewResultPanelProps) {
  if (approved) {
    return (
      <div className="review-panel review-approved">
        <div className="review-icon">
          <Check className="w-6 h-6" />
        </div>
        <div className="review-content">
          <h3 className="review-title">Changes Approved</h3>
          <p className="review-reason">{reason}</p>
        </div>
        <div className="review-actions">
          <Button
            variant="outline"
            onClick={onContinueEditing}
            disabled={isSaving}
          >
            Continue Editing
          </Button>
          <Button
            onClick={onSave}
            disabled={isSaving}
            className="bg-green-600 hover:bg-green-700 text-white"
          >
            {isSaving ? 'Saving...' : 'Save Changes'}
          </Button>
        </div>
      </div>
    );
  }

  return (
    <div className="review-panel review-rejected">
      <div className="review-icon">
        <X className="w-6 h-6" />
      </div>
      <div className="review-content">
        <h3 className="review-title">Changes Not Approved</h3>
        <p className="review-reason">{reason}</p>
      </div>
      <div className="review-actions">
        <Button onClick={onContinueEditing}>
          Continue Editing
        </Button>
      </div>
    </div>
  );
}