import React from 'react';

interface CvSummaryPanelProps {
  summary: string | null;
  analysisData: any | null;
}

const CvSummaryPanel: React.FC<CvSummaryPanelProps> = ({ summary, analysisData }) => {
  if (!analysisData) {
    return <div className="p-6 text-gray-500">No summary available yet. Upload your CV to see the summary.</div>;
  }

  const sectionColors = {
    "Summary": "bg-blue-500",
    "Work Experience": "bg-green-500",
    "Education": "bg-yellow-500",
    "Skills": "bg-red-500",
    "Certifications": "bg-purple-500",
    "Projects": "bg-teal-500",
  };

  return (
    <div className="p-6 bg-gray-50 rounded-md shadow-md">
      <h2 className="text-xl font-bold text-gray-900 mb-4">CV Section Scores</h2>
      <div className="space-y-4">
        {Object.entries(analysisData.sections).map(([sectionName, sectionData]: [string, any]) => (
          <div key={sectionName} className="space-y-2">
            <div className="flex items-center space-x-2">
              <div className="w-32 font-bold text-gray-900">{sectionName}</div>
              <div className="relative w-full bg-gray-200 rounded-full h-6">
                <div
                  className={`absolute left-0 top-0 h-6 rounded-full ${(sectionColors as any)[sectionName] ?? 'bg-gray-700'}`}
                  style={{ width: `${(sectionData.score / 10) * 100}%` }}
                >
                  <span className="absolute right-2 top-1/2 transform -translate-y-1/2 text-sm font-bold text-white">{sectionData.score}</span>
                </div>
              </div>
            </div>
             {sectionData.suggestions && sectionData.suggestions.length > 0 && (
              <div key={`${sectionName}-suggestions`} className="space-y-1">
                <ul className="list-disc pl-8 text-gray-700">
                  {sectionData.suggestions.map((suggestion: string, index: number) => (
                    <li key={index}>{suggestion}</li>
                  ))}
                </ul>
              </div>
            )}
          </div>
        ))}
      </div>
      {summary && (
        <>
          <h2 className="text-xl font-bold text-gray-900 mt-6 mb-4">CV Summary</h2>
          <div className="text-gray-700 whitespace-pre-line">
            {summary}
          </div>
        </>
      )}
    </div>
  );
};

export default CvSummaryPanel;