import React from 'react';
import { useCvStore } from '../store/cvStore';
import ATSTemplate from '../templates/ATSTemplate';

interface PreviewPanelProps {
  className?: string;
}

const PreviewPanel: React.FC<PreviewPanelProps> = ({ className = '' }) => {
  const cv = useCvStore(state => state.cv);
  const templateId = useCvStore(state => state.cv.templateId);
  
  return (
    <div className={`bg-gray-100 rounded-lg shadow-inner overflow-auto ${className}`}>
      <div className="sticky top-0 bg-gray-200 p-3 border-b flex justify-between items-center">
        <h2 className="text-lg font-medium text-gray-700">Preview</h2>
        <div className="text-sm text-gray-500">
          Template: <span className="font-medium">{templateId === 'ats' ? 'ATS-Friendly' : templateId}</span>
        </div>
      </div>
      
      <div className="p-4">
        {/* Render the appropriate template based on templateId */}
        {templateId === 'ats' && <ATSTemplate cv={cv} />}
        {/* Add more template options here as they are implemented */}
      </div>
    </div>
  );
};

export default PreviewPanel;