import { FaUserCircle, FaGavel, FaPhoneAlt, FaArrowRight, FaFileInvoice, FaHandshake, } from 'react-icons/fa';
import { PiArrowRightThin } from 'react-icons/pi';

const AuctionProcess: React.FC = () => {
  return (
    <div className="flex items-center justify-center py-40 my-auto mx-auto">
      {/* User Icon and Text */}
      <div className="flex flex-col items-center mr-10">
        <FaUserCircle className="text-7xl" />
        <p className="font-bold mt-10">Du som privat</p>
        <p className='w-48 text-center'>opretter en auktion på din bil og sætter din ønskede pris. Denne pris kan ikke ses af forhandlere</p>
      </div>

      {/* Arrow */}
      <div className='flex items-center mx-4'>
        <PiArrowRightThin className="text-5xl" />
      </div>

      {/* Briefcase Icon and Text */}
      <div className="flex flex-col items-center mr-10 ml-10">
        <FaGavel className="text-7xl" />
        <p className="font-bold mt-10">Jer som forhandlere</p>
        <p className='w-48 text-center'>Forhandlere har muligheden for at byde på biler opstillet af private</p>
      </div>

      {/* Arrow */}
      <div className='flex items-center mx-4'>
        <PiArrowRightThin className="text-5xl" />
      </div>

      {/* Phone Icon and Text */}
      <div className="flex flex-col items-center ml-10 mr-10">
        <FaPhoneAlt className="text-7xl" />
        <p className="font-bold mt-10">Vi sørger for kontakten</p>
        <p className='w-48 text-center'>Når et bud matcher eller nærmer sig den ønskede pris træder vi til for at oprette kontakten mellem jer</p>
      </div>

      {/* Arrow */}
      <div className='flex items-center mx-4'>
        <PiArrowRightThin className="text-5xl" />
      </div>

      {/* Phone Icon and Text */}
      <div className="flex flex-col items-center ml-10 mr-10">
        <FaHandshake className="text-7xl" />
        <p className="font-bold mt-10">Afhentning aftales</p>
        <p className='w-48 text-center'>Når i er blevet enige om salg af bil bliver en afhentning sat på plads</p>
      </div>
      {/* Arrow */}
      <div className='flex items-center mx-4'>
        <PiArrowRightThin className="text-5xl" />
      </div>

      {/* Phone Icon and Text */}
      <div className="flex flex-col items-center ml-10 mr-10">
        <FaFileInvoice className="text-7xl" />
        <p className="font-bold mt-10">Faktura sendes</p>
        <p className='w-48 text-center'>Når afhentningen af på plads sender vi faktura ud om betaling. Når fakturaen er betalt fratrækker vi gebyret og sender pengene til sælger</p>
      </div>
    </div>
  );
};

export default AuctionProcess;