import { MarkdownRenderer, FormContainer } from '../elements';
import type { JobPosting } from '../../types/api/job-posting';
import type { FormDefinition } from '../../types/api/form';
import { JobApplicationForm } from './job-application-form.aman';

interface JobDetailSectionProps {
    job?: JobPosting | null;
    formDefinition?: FormDefinition | null;
}

export const JobDetailSection = ({
    job,
    formDefinition,
}: JobDetailSectionProps) => {
    if (!job) return null;

    const sections = [
        { title: 'About the Role', content: job.description_markdown },
        { title: 'Requirements', content: job.requirements_markdown },
        { title: 'Benefits', content: job.benefits_markdown },
    ].filter(section => section.content);

    return (
        <section className="bg-primary py-16 md:py-20">
            <div className="mx-auto max-w-container px-4 md:px-8">
                <div className="grid grid-cols-1 gap-12 lg:grid-cols-2 lg:gap-16">
                    {/* Left Column: About the Role and Requirements */}
                    <div className="space-y-12">
                        {sections.map((section, index) => (
                            <div key={index} className="space-y-4">
                                <h2 className="font-heading text-3xl font-light uppercase tracking-wide text-primary md:text-4xl">
                                    {section.title}
                                </h2>
                                <div className="prose prose-lg font-body max-w-none text-secondary">
                                    <MarkdownRenderer content={section.content} />
                                </div>
                            </div>
                        ))}
                    </div>

                    {/* Right Column: Application Form */}
                    <div className="lg:sticky lg:top-8 lg:self-start">
                        <FormContainer 
                            variant="aman"
                            bordered={true}
                            title="Apply for this Position"
                            description="Fill out the form below to submit your application"
                        >
                            <JobApplicationForm jobSlug={job.slug} formDefinition={formDefinition} inline />
                        </FormContainer>
                    </div>
                </div>
            </div>
        </section>
    );
};
