import React from 'react';
import { SECTION_IDS, CAREERS_PAGE_CONTENT } from '../constants'; // mockVacancies removed
import Button from './Button'; 
import { ChevronRightIcon, BriefcaseIcon } from './icons'; // Added BriefcaseIcon
import { CurrentView, Vacancy } from '../types'; 

interface CareersSectionProps {
  vacancies: Vacancy[]; // Changed from mockVacancies to accept prop
  setCurrentView: (view: CurrentView) => void;
  setSelectedItemId: (id: string | null) => void;
}

const CareersSection: React.FC<CareersSectionProps> = ({ vacancies, setCurrentView, setSelectedItemId }) => {
  
  const handleDetailsClick = (vacancyId: string) => {
    setCurrentView('vacancyDetail');
    setSelectedItemId(vacancyId);
  };

  return (
    <section 
      id={SECTION_IDS.careersPage} 
      className="py-16 md:py-24 bg-white min-h-screen"
    >
      <div className="container mx-auto px-4 sm:px-6 lg:px-8">
        <header className="mb-12 md:mb-16 text-center md:text-left">
          <h1 className="font-quicksand text-4xl sm:text-5xl md:text-6xl font-bold text-slate-900">
            {CAREERS_PAGE_CONTENT.title}
          </h1>
          <p className="mt-4 text-lg md:text-xl text-slate-700 max-w-2xl mx-auto md:mx-0">
            {CAREERS_PAGE_CONTENT.subtitle}
          </p>
        </header>
        
        <div className="space-y-8">
          {vacancies && vacancies.length > 0 ? (
            vacancies.map((vacancy: Vacancy) => (
              <div key={vacancy.id} className="bg-white p-6 rounded-xl">
                <div className="md:flex md:justify-between md:items-start">
                  <div>
                    <h2 className="text-2xl font-quicksand font-semibold text-slate-800 mb-1">{vacancy.title}</h2>
                    <p className="text-sm text-slate-500 mb-2">
                      {vacancy.department} • {vacancy.location} • {vacancy.type}
                    </p>
                    <p className="text-slate-600 font-inter line-clamp-2">{vacancy.description}</p>
                  </div>
                  <div className="mt-4 md:mt-0 md:ml-6 flex-shrink-0">
                    <Button 
                      variant="outline"
                      size="md"
                      onClick={() => handleDetailsClick(vacancy.id)}
                      rightIcon={<ChevronRightIcon />}
                      aria-label={`Подробнее о вакансии ${vacancy.title}`}
                    >
                      Подробнее
                    </Button>
                  </div>
                </div>
              </div>
            ))
          ) : (
            <div className="text-center py-10 bg-white p-6 rounded-xl">
              <BriefcaseIcon className="w-16 h-16 mx-auto text-slate-300 mb-4" />
              <h2 className="text-2xl font-quicksand font-semibold text-slate-700 mb-3">{CAREERS_PAGE_CONTENT.noVacanciesTitle}</h2>
              <p className="text-slate-600 font-inter">
                {CAREERS_PAGE_CONTENT.noVacanciesMessagePt1}
              </p>
              <p className="text-slate-600 font-inter mt-3">
                Вы можете следить за обновлениями на этой странице или отправить свое резюме и сопроводительное письмо на адрес <a href={`mailto:${CAREERS_PAGE_CONTENT.hrEmail}`} className="text-slate-700 hover:text-black hover:underline">{CAREERS_PAGE_CONTENT.noVacanciesContactEmailText}</a>. {CAREERS_PAGE_CONTENT.noVacanciesMessagePt2}
              </p>
            </div>
          )}
        </div>

        <div className="mt-16 text-center">
            <h3 className="text-xl font-quicksand font-semibold text-slate-700 mb-3">{CAREERS_PAGE_CONTENT.notFoundTitle}</h3>
            <p className="text-slate-600 font-inter mb-6 max-w-xl mx-auto">
                {CAREERS_PAGE_CONTENT.notFoundMessage}
            </p>
            <Button 
                variant="primary" 
                size="lg"
                onClick={() => window.location.href = `mailto:${CAREERS_PAGE_CONTENT.hrEmail}?subject=${encodeURIComponent(CAREERS_PAGE_CONTENT.applySubject)}`}
            >
                {CAREERS_PAGE_CONTENT.applyButtonText}
            </Button>
        </div>

      </div>
    </section>
  );
};

export default CareersSection;