import DownloadIcon from '../../public/icons/download-speed.svg';
import UploadIcon from '../../public/icons/upload-speed.svg';

const Plan: React.FC<{ id?: string }> = ({ id }) => {
  return (
    <div id={id} className='flex flex-col  p-8 xs:p-12 bg-white text-customBlack space-y-7 mt-16 xs:ml-6'>
      <h1 className='text-2xl 2xl:text-3xl'>Básico</h1>
      <div className='flex'>
        <h1 className='flex text-4xl 2xl:text-6xl text-center'>
          <span className='text-lg 2xl:text-2xl mr-1'>$</span> 279
          <span className='text-lg 2xl:text-xl self-end'>/al mes</span>
        </h1>
      </div>
      <div className='mt-28 mb-20 border-t-2 border-primary w-full' />

      <div className='flex justify-between space-x-4 text-center'>
        <div className='flex flex-col items-center w-24 space-y-1'>
          <DownloadIcon width='61' height='43' />
          <p>Velocidad de Descarga</p>
        </div>
        <div className='flex flex-col items-center w-24 space-y-1'>
          <UploadIcon width='61' height='43' />
          <p>Velocidad de Subida</p>
        </div>
      </div>

      <div className='flex justify-between'>
        <h1 className='flex text-4xl 2xl:text-6xl text-center'>
          6<span className='text-lg 2xl:text-xl self-end ml-4'>Mb</span>
        </h1>
        <h1 className='flex text-4xl 2xl:text-6xl text-center'>
          2<span className='text-lg 2xl:text-xl self-end ml-4'>Mb</span>
        </h1>
      </div>

      <p className='text-center'>Contrato a 12 meses</p>

      <button
        type='submit'
        className={`g-primary-button text-lg 2xl:text-2xl py-2 rounded-none bg-primary text-white font-normal`}
      >
        CONTRATAR AHORA
      </button>
    </div>
  );
};

export default Plan;