/**
 * @license
 * SPDX-License-Identifier: Apache-2.0
*/
import React from 'react';
import LoadingSpinner from './LoadingSpinner';

interface JobMatchDashboardProps {
  score: number;
  suggestions: string[];
  isLoading: boolean;
  hasContent: boolean;
}

export default function JobMatchDashboard({ score, suggestions, isLoading, hasContent }: JobMatchDashboardProps) {
  const gaugeRotation = (score / 100) * 180; // 0 score = 0deg, 100 score = 180deg

  if (!hasContent) {
    return (
        <div className="dashboard">
            <div className="copilot-placeholder">
                <i className="ph-lightbulb" style={{fontSize: '2rem', marginBottom: '0.5rem'}}></i>
                Your Job Match Score and AI Insights will appear here once a resume is generated.
            </div>
        </div>
    )
  }

  return (
    <div className="dashboard">
      <h2>Live Analysis</h2>
      
      <div className="score-gauge">
        <div className="score-gauge-bg"></div>
        <div 
          className="score-gauge-fill" 
          style={{ '--gauge-rotation': `${gaugeRotation}deg` } as React.CSSProperties}
        ></div>
        <div className="score-text">{score}<span>/100</span></div>
      </div>
      
      <div className="suggestions-list">
        <h3>AI Suggestions {isLoading && <small>(Updating...)</small>}</h3>
        {suggestions.length > 0 ? (
          <ul>
            {suggestions.map((suggestion, index) => (
              <li key={index} className="suggestion-item">
                <i className="ph-check-circle"></i>
                <span>{suggestion}</span>
              </li>
            ))}
          </ul>
        ) : (
          <p>No suggestions at the moment. Looks good!</p>
        )}
      </div>
    </div>
  );
}