'use client';

import React from 'react';
// import { FaSearch } from 'react-icons/fa';
import { GoArrowUpRight } from "react-icons/go";
import Link from 'next/link';
import Image from 'next/image';

const jobs = [
  // {
  //   title: 'Web Designer',
  //   experience: '1+ Years | Full Time',
  //   image: '/images/jon_web_designer.webp',
  //   link: '/career-web-designer',
  // },
  // {
  //   title: 'Social Media Expert',
  //   experience: '1.5 - 2 Years | Full Time',
  //   image: '/images/social_media_expert_hob.webp',
  //   link: '/career-social-media-expert',
  // },
  // {
  //   title: 'Laravel Developer',
  //   experience: 'fresher | Full Time',
  //   image: '/images/job_laravel.webp',
  //   link: '/career-laravel-developer',
  // },
  // {
  //   title: 'Graphic Designer',
  //   experience: 'Intern | Full Time',
  //   image: '/images/job_graphic_design.webp',
  //   link: '/career-graphic-designer',
  // },
  // {
  //   title: 'QA - Quality Analyst (Female)',
  //   experience: '1+ Years | Full Time',
  //   image: '/images/job_QA.webp',
  //   link: '/career-quality-analyst',
  // },
  {
    title: 'Performance Marketing',
    experience: '2+ Years | Full Time',
    image: '/images/job_performance_marketing.webp',
    link: '/career-performance-marketing',
  },
  {
    title: 'Content Writing Expert',
    experience: '1+ Years | Full Time',
    image: '/images/job_content_writing.webp',
    link: '/career-content-writing-expert',
  },
  {
    title: 'Sales Coordinator (Female)',
    experience: '1+ Years | Full Time',
    image: '/images/job_sales_coordinator.webp',
    link: '/career-sales-coordinator',
  },
  // {
  //   title: 'Graphic Designer',
  //   experience: 'Intern | Full Time',
  //   image: '/images/job_graphic_design.webp',
  //   link: '/career-graphic-designer',
  // },
//   {
//     title: 'Laravel Developer',
//     experience: 'Intern | Full Time',
//     image: '/images/job_laravel.webp',
//     link: '/career-laravel-developer',
//   },
  // {
  //   title: 'SEO Expert',
  //   experience: 'fresher | Full Time',
  //   image: '/images/job_seo.webp',
  //   link: '/career-seo-expert',
  // },
  // {
  //   title: 'UI/UX Designer',
  //   experience: '1+ Years | Full Time',
  //   image: '/images/jon_uiux.webp',
  //   link: '/career-ui-ux-designer',
  // },
  // {
  //   title: 'Flutter Developer',
  //   experience: '1+ Years | Full Time',
  //   image: '/images/jon_flutter.webp',
  //   link: '/career-flutter-developer',
  // },
  // {
  //   title: 'Business Development Executive (Female)',
  //   experience: '1+ Years | Full Time',
  //   image: '/images/bde.webp',
  //   link: '/business-development-executive',
  // },
];

const CareerJobs = () => {
  return (
    <div className='pb-20 px-4'>
        <div className="max-w-[1200px] mx-auto">
            {/* Search and Filter Section */}
            {/* <div className="grid md:grid-cols-11 gap-3 md:gap-5 items-center justify-center mb-10 bg-[#FAEEE7] p-4 shadow-md rounded-lg">
                <div className='col-span-4'>
                    <input type="text" placeholder="Search Job" className="border px-4 py-2 rounded-lg w-full bg-white  focus:outline-none focus:ring-2 focus:ring-orange-400" />
                </div>
                <div className='md:col-span-3'>
                    <select id="country" name="country" className="w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-[#000]  outline-1 -outline-offset-1 focus:ring-2  focus:ring-orange-400 ">
                        <option>Job Type</option>
                        <option>Full Time</option>
                        <option>Part Time</option>
                        <option>Internship</option>
                    </select>
                </div>
                <div className='md:col-span-3'>
                    <select className="w-full appearance-none rounded-md bg-white py-2 pr-8 pl-3 text-base text-[#000]  outline-1 -outline-offset-1 focus:ring-2  focus:ring-orange-400 ">
                        <option>Working Time</option>
                        <option>Day Shift</option>
                        <option>Night Shift</option>
                        <option>Flexible</option>
                    </select>
                </div>
                <div className='col-span-1 flex justify-center'>
                    <button className="bg-orange-500 hover:bg-orange-600 p-3 rounded-lg text-white transition duration-300 shadow-md">
                        <FaSearch />
                    </button>
                </div>
            </div> */}

            {/* Job Listing Section */}
            <h2 className="text-2xl font-semibold  mb-6 text-[#000]">Join Now...</h2>
            <div className="grid sm:grid-cols-2 lg:grid-cols-3 gap-6 ">
                {jobs.map((job, index) => (
                <div key={index} className="border border-[#FAEEE7] rounded-lg p-4 overflow-hidden bg-white transition duration-300">
                    <Image src={job.image} alt={job.title} width={1200} height={600} className="w-full h-48 rounded-md object-cover" />
                    <div className="mt-3 flex justify-between">
                        <div>
                            <h3 className="text-[16px] md:text-[18px] font-semibold text-[#5D5D5D]">{job.title}</h3>
                            <p className="text-sm text-[#5D5D5D] mt-1">Exp. {job.experience}</p>
                        </div>
                        <div>
                            <Link href={job.link}>
                                    <div className="Custome_Orange_button_apply flex items-center justify-center gap-3 text-[15px]">APPLY<GoArrowUpRight className="h-[20px] w-[20px]" /></div>
                                    {/* <div className="bg-orange-500 hover:bg-orange-600 text-[15px] text-white px-4 pt-1 pb-1 mt-3 rounded-[110px] flex items-center gap-2 transition duration-300 cursor-pointer">
                                        APPLY<GoArrowUpRight className='h-[15px] md:h-[20px] w-[15px] md:w-[20px]'/>
                                    </div> */}
                            </Link>
                        </div>
                    </div>
                </div>
                ))}
            </div>
        </div>

    </div>
  )
}

export default CareerJobs
