import React from 'react';
import Link from 'next/link';
import { Button } from '@/components/ui/Button';

export interface JobListingBlockProps {
  title?: string;
  showJobs?: boolean;
  showFairs?: boolean;
  fairsTitle?: string;
  fairs?: Array<{ name: string; date: string; type: string }>;
  emptyStateMessage?: string;
  emptyStateLinkText?: string;
  emptyStateLinkHref?: string;
}

export const JobListingBlock = async (props: JobListingBlockProps) => {
  const { 
    title, 
    showJobs = true,
    showFairs,
    fairsTitle = 'Nächste Messetermine 2026',
    fairs = [
      { name: 'Intersolar München', date: '19. - 21. Juni 2026', type: 'Energie-Messe' },
      { name: 'Windenergietage Linstow', date: '04. - 06. November 2026', type: 'Fachkongress' },
      { name: 'Kabelwerkstatt Wiesbaden', date: '02. - 03. Dezember 2026', type: 'Fachmesse' }
    ],
    emptyStateMessage = 'Aktuell sind alle Positionen besetzt. Senden Sie uns gerne eine Initiativbewerbung!',
    emptyStateLinkText = 'Jetzt Kontakt aufnehmen',
    emptyStateLinkHref = '/kontakt'
  } = props;

  // Since Payload is removed, we use an empty array or static data
  const jobs: any[] = [];

  return (
    <div className="py-12 md:py-24">
      <div className="container max-w-4xl mx-auto">
        {showFairs && (
          <div className="bg-neutral-dark rounded-2xl p-8 md:p-12 mb-16 text-white overflow-hidden relative group">
            <div className="absolute top-0 right-0 w-64 h-64 bg-primary/20 blur-3xl -translate-y-1/2 translate-x-1/2" />
            <h3 className="font-heading font-bold text-3xl mb-8 relative z-10 flex items-center gap-3">
              <span className="w-8 h-1 bg-primary" />
              {fairsTitle}
            </h3>
            <ul className="space-y-6 relative z-10">
              {fairs.map((messe) => (
                <li key={messe.name} className="flex flex-col md:flex-row md:items-center justify-between border-b border-white/10 pb-6 group/item hover:bg-white/5 transition-colors p-4 -m-4 rounded-2xl">
                  <div>
                    <span className="text-primary-light font-bold text-sm uppercase tracking-widest block mb-1">{messe.type}</span>
                    <span className="font-heading font-bold text-2xl">{messe.name}</span>
                  </div>
                  <div className="mt-2 md:mt-0 text-right">
                    <span className="text-white/60 font-medium block">{messe.date}</span>
                  </div>
                </li>
              ))}
            </ul>
          </div>
        )}

        {showJobs && (
          <div className="mb-12">
            <h2 className="font-heading font-extrabold text-4xl text-neutral-dark mb-8">
              {title || 'Aktuelle Stellenangebote'}
            </h2>
            
            {jobs.length > 0 ? (
              <div className="grid gap-6">
                {jobs.map((job: any) => (
                  <Link 
                    key={job.id} 
                    href={`/karriere/${job.slug}`}
                    className="group bg-white border border-neutral-100 p-8 rounded-2xl shadow-sm hover:shadow-xl hover:border-primary/20 transition-all flex flex-col md:flex-row md:items-center justify-between gap-6"
                  >
                    <div>
                      <div className="flex items-center gap-3 mb-2">
                        <span className="px-3 py-1 bg-primary/10 text-primary text-xs font-bold rounded-full uppercase">{job.type}</span>
                        <span className="text-text-secondary text-sm font-medium">{job.department}</span>
                      </div>
                      <h4 className="font-heading font-bold text-2xl text-neutral-dark group-hover:text-primary transition-colors">{job.title}</h4>
                      <p className="text-text-secondary mt-1">{job.location}</p>
                    </div>
                    <div className="flex items-center text-primary font-bold group-hover:translate-x-2 transition-transform">
                      Details ansehen
                      <svg xmlns="http://www.w3.org/2000/svg" className="w-5 h-5 ml-2" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2.5" strokeLinecap="round" strokeLinejoin="round"><line x1="5" y1="12" x2="19" y2="12"></line><polyline points="12 5 19 12 12 19"></polyline></svg>
                    </div>
                  </Link>
                ))}
              </div>
            ) : (
              <div className="bg-neutral-50 border border-neutral-100 rounded-2xl p-12 text-center">
                <p className="text-text-secondary text-lg">{emptyStateMessage}</p>
                <Button href={emptyStateLinkHref} variant="primary" className="mt-6">
                  {emptyStateLinkText}
                </Button>
              </div>
            )}
          </div>
        )}
      </div>
    </div>
  );
};