Untitled

import React from "react";
import { useResume } from "../context/ResumeContext";

const Evaluation = () => {
    const { parsedData } = useResume();

    if (!parsedData) return <div>No data found. Please upload a CV first.</div>;

    return (
        <div className="flex h-[calc(100vh-100px)] gap-8 p-6 bg-gray-50">
            {/* Column 1: The Parsed Resume (Aesthetic View) */}
            <div className="flex-1 overflow-y-auto rounded-xl border bg-white p-10 shadow-2xl custom-scrollbar">
                <header className="border-b pb-6 mb-6">
                    <h1 className="text-4xl font-bold text-gray-800">{parsedData.personalInfo.fullName}</h1>
                    <div className="mt-2 flex flex-wrap gap-4 text-gray-600 text-sm">
                        <span>{parsedData.personalInfo.email}</span>
                        <span>{parsedData.personalInfo.phone}</span>
                        <span>{parsedData.personalInfo.location}</span>
                    </div>
                </header>

                <section className="mb-8">
                    <h2 className="text-lg font-semibold uppercase tracking-wider text-red-600 mb-2">Summary</h2>
                    <p className="text-gray-700 leading-relaxed">{parsedData.summary}</p>
                </section>

                <section className="mb-8">
                    <h2 className="text-lg font-semibold uppercase tracking-wider text-red-600 mb-4">Experience</h2>
                    {parsedData.experience.map((exp, i) => (
                        <div key={i} className="mb-6">
                            <div className="flex justify-between items-baseline">
                                <h3 className="font-bold text-gray-800">{exp.jobTitle}</h3>
                                <span className="text-sm text-gray-500 italic">{exp.duration}</span>
                            </div>
                            <p className="text-gray-600 font-medium">{exp.company}</p>
                            <ul className="mt-2 list-disc list-inside text-gray-700 space-y-1">
                                {exp.responsibilities.map((resp, j) => (
                                    <li key={j} className="text-sm">{resp}</li>
                                ))}
                            </ul>
                        </div>
                    ))}
                </section>

                {/* Add Education and Skills sections similarly */}
            </div>

            {/* Column 2: AI Suggestions (Placeholder for next step) */}
            <div className="w-1/3 rounded-xl border bg-gray-900 text-white p-8 shadow-xl overflow-y-auto">
                <h2 className="text-2xl font-bold mb-4">AI Optimizer Agent</h2>
                <p className="text-gray-400 italic">Waiting for your JD evaluation...</p>
            </div>
        </div>
    );
};

export default Evaluation;