// frontend/src/components/Preview/templates/ModernTemplate.jsx
import React from 'react';

const ModernTemplate = ({ data }) => {
  const { personal, summary, skills, experience, education } = data;
  
  return (
    <div className="p-8 max-w-4xl mx-auto">
      <div className="border-b-4 border-blue-500 pb-4 mb-6">
        <h1 className="text-4xl font-bold text-gray-800">{personal.name}</h1>
        <p className="text-xl text-blue-600 mt-2">{personal.title}</p>
        <div className="flex gap-4 mt-3 text-sm text-gray-600">
          <span>{personal.email}</span>
          <span>{personal.phone}</span>
          <span>{personal.location}</span>
        </div>
      </div>
      
      {summary && (
        <div className="mb-6">
          <h2 className="text-xl font-semibold text-gray-800 mb-2">Professional Summary</h2>
          <p className="text-gray-700 leading-relaxed">{summary}</p>
        </div>
      )}
      
      {skills && skills.length > 0 && (
        <div className="mb-6">
          <h2 className="text-xl font-semibold text-gray-800 mb-2">Core Skills</h2>
          <div className="flex flex-wrap gap-2">
            {skills.map((skill, idx) => (
              <span key={idx} className="bg-blue-100 text-blue-700 px-3 py-1 rounded-full text-sm">
                {skill}
              </span>
            ))}
          </div>
        </div>
      )}
      
      {experience && experience.length > 0 && (
        <div className="mb-6">
          <h2 className="text-xl font-semibold text-gray-800 mb-3">Work Experience</h2>
          {experience.map((job, idx) => (
            <div key={idx} className="mb-4">
              <div className="flex justify-between items-start">
                <div>
                  <h3 className="font-semibold text-gray-800">{job.position}</h3>
                  <p className="text-blue-600">{job.company}</p>
                </div>
                <span className="text-sm text-gray-500">{job.start_date} - {job.end_date}</span>
              </div>
              <p className="text-gray-700 mt-2">{job.description}</p>
            </div>
          ))}
        </div>
      )}
      
      {education && education.length > 0 && (
        <div>
          <h2 className="text-xl font-semibold text-gray-800 mb-3">Education</h2>
          {education.map((edu, idx) => (
            <div key={idx} className="mb-3">
              <div className="flex justify-between">
                <div>
                  <h3 className="font-semibold text-gray-800">{edu.degree}</h3>
                  <p className="text-gray-600">{edu.school}</p>
                </div>
                <span className="text-sm text-gray-500">{edu.year}</span>
              </div>
            </div>
          ))}
        </div>
      )}
    </div>
  );
};

export default ModernTemplate;