components/AiCoPilotPanel.tsx

/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
*/
import React from 'react';
import type { ActiveEditor } from '../lib/types';

interface AiCoPilotPanelProps {
  activeEditor: ActiveEditor | null;
  onRefine: (instruction: string) => void;
  isLoading: boolean;
}

export default function AiCoPilotPanel({ activeEditor, onRefine, isLoading }: AiCoPilotPanelProps) {
  if (!activeEditor) {
    return (
      <div className="ai-copilot-panel">
        <div className="copilot-placeholder">
            <i className="ph-cursor-text" style={{fontSize: '2rem', marginBottom: '0.5rem'}}></i>
            Click on a section in your resume to activate the AI Co-pilot.
        </div>
      </div>
    );
  }

  const refinementActions = [
    { instruction: "Rewrite this section to be more impactful.", label: "Rewrite for Impact", icon: "ph-shooting-star" },
    { instruction: "Make this section more concise.", label: "Make More Concise", icon: "ph-arrows-in-simple" },
    { instruction: "Rephrase this using stronger, professional action verbs.", label: "Use Stronger Verbs", icon: "ph-rocket-launch" },
    { instruction: "Generate 3 alternative bullet points based on this content.", label: "Suggest Bullet Points", icon: "ph-list-bullets" },
  ];

  return (
    <div className="ai-copilot-panel">
      <h3>AI Co-pilot: <span style={{color: 'var(--color-accent)'}}>{activeEditor.sectionId}</span></h3>
      <div className="copilot-actions">
        {refinementActions.map(({ instruction, label, icon }) => (
          <button
            key={instruction}
            className="copilot-button"
            onClick={() => onRefine(instruction)}
            disabled={isLoading}
          >
            <i className={icon}></i>
            <span>{label}</span>
            {isLoading && <small>(...)</small>}
          </button>
        ))}
      </div>
    </div>
  );
}