import {ChevronRight} from "lucide-react";
import Link from "next/link";

interface JobCardProps {
  id: string
  title: string
  location: string
  positions: number
  requirements: string
}
function Recruitment({list}:{list:RecruitmentInfo[]}) {
  function JobCard({ id, title, location, positions, requirements }: JobCardProps) {
    return (
      <div className="w-80 bg-[url('/assets/about/21.png')] bg-[length:103%_100%] bg-no-repeat rounded-2xl border border-blue-200 overflow-hidden shadow-sm hover:shadow-md transition-shadow">
        {/* Header */}
        <div className="bg-blue-500 text-white px-6 py-4 rounded-t-2xl">
          <h3 className="text-lg font-medium">{title}</h3>
        </div>

        {/* Content */}
        <div className="p-6 space-y-4">
          {/* Work Location */}
          <div className="flex items-start gap-3">
            <div className="w-2 h-2 bg-blue-400 rounded-full mt-2 flex-shrink-0"></div>
            <div>
              <span className="text-gray-700 font-medium">工作地址：</span>
              <span className="text-gray-600">{location}</span>
            </div>
          </div>

          {/* Number of Positions */}
          <div className="flex items-start gap-3">
            <div className="w-2 h-2 bg-blue-400 rounded-full mt-2 flex-shrink-0"></div>
            <div>
              <span className="text-gray-700 font-medium">招聘人数：</span>
              <span className="text-gray-600">{positions}</span>
            </div>
          </div>

          {/* Job Requirements */}
          <div className="flex items-start gap-3">
            <div className="w-2 h-2 bg-blue-400 rounded-full mt-2 flex-shrink-0"></div>
            <div>
              <span className="text-gray-700 font-medium">岗位要求：</span>
              <p className="text-gray-600 mt-1 leading-relaxed line-clamp-1">{requirements}</p>
            </div>
          </div>

          {/* Learn More Button */}
          <div className="pt-4">
            <Link href={`/about/recruitList/${id}`}>
              <button
                className="flex items-center gap-2 text-orange-500 hover:text-orange-600 transition-colors cursor-pointer">
                <span className="font-medium">了解更多</span>
                <div className="w-6 h-6 bg-orange-500 rounded-full flex items-center justify-center">
                  <ChevronRight className="w-3 h-3 text-white"/>
                </div>
              </button>
            </Link>
          </div>
        </div>
      </div>
    )
  }

  return (
    <>
      <div className="max-w-4/5 mx-auto py-8">
        <div className="px-4">
          <div className="flex justify-around gap-12">
            {list && list.length > 0 ? (
              list.map((job) => (
                <JobCard
                  key={job.id}
                  title={job.jobOpenings}
                  location={job.workLocation}
                  positions={job.numberRecruits}
                  requirements={job.jobRequirements}
                  id={job.id}
                />
              ))
            ) : (
              <p className="text-gray-500">暂无招聘信息</p>
            )}
          </div>

          {/* More Positions Button */}
          <div className="flex justify-center mt-8">
            <Link href={'/about/recruitList'} className="font-medium">
            <button
              className="flex items-center gap-2 px-6 py-3 bg-white border border-blue-300 rounded-lg text-blue-600 hover:bg-blue-50 transition-colors cursor-pointer">
              更多岗位
              <ChevronRight className="w-4 h-4"/>
            </button>
            </Link>
          </div>
        </div>
      </div>
    </>
  );
}

export default Recruitment;