import type { JobPosting } from '../../types/api/job-posting';

interface JobGalleryProps {
  jobs?: JobPosting[] | null;
  title?: string;
  maxItems?: number;
}

export const JobGallery = ({
  jobs: jobsData,
  title = "",
  maxItems,
}: JobGalleryProps) => {
  const jobs = Array.isArray(jobsData) ? jobsData : [];
  const displayJobs = maxItems ? jobs.slice(0, maxItems) : jobs;

  return (
    <section>
      <div className="mx-auto max-w-container px-4 md:px-8">
        <div className="mb-12 text-center">
          <h2 className="font-display text-4xl font-normal text-fg-primary md:text-5xl">
            {title}
          </h2>
        </div>

        {displayJobs.length > 0 ? (
          <div className="space-y-6">
            {displayJobs.map((job) => {
              const description = job.description_markdown?.replace(/[#*\[\]()]/g, '').trim().substring(0, 200) || '';
              
              return (
                <div key={job.id} className="border-b border-secondary pb-6">
                  <div className="flex flex-col md:flex-row md:items-center md:justify-between">
                    <div className="flex-grow">
                      <h3 className="font-display text-2xl font-normal text-fg-primary mb-2">
                        {job.title}
                      </h3>
                      
                      <div className="flex gap-4 mb-4">
                        {job.location && (
                          <p className="text-xs font-body uppercase tracking-widest" style={{ color: 'var(--color-text-brand-secondary)' }}>
                            {job.location}
                          </p>
                        )}
                      </div>
                      
                      {description && (
                        <p className="font-body text-base text-tertiary mb-4">
                          {description}
                        </p>
                      )}
                    </div>
                    
                    <a
                      href={`/careers/${job.slug}`}
                      className="font-body text-base underline underline-offset-4 hover:no-underline whitespace-nowrap md:ml-6 transition-colors"
                      style={{ color: 'var(--color-text-brand-accent)' }}
                    >
                      View details
                    </a>
                  </div>
                </div>
              );
            })}
          </div>
        ) : (
          <div className="text-center py-12">
            <p className="font-body text-base text-tertiary">No open positions at this time</p>
          </div>
        )}
      </div>
    </section>
  );
};

import { registerThemeVariant } from '../../lib/component-registry';
registerThemeVariant('job-gallery', 'aman', JobGallery);
