import React, { useState } from 'react'
import Label from '../Label'
import InputText from '../InputText'

export default function SelectedOffer({step, handleStep, screens}) {

    const [pin, setPin] = useState('')

    console.log(step.details)
    const handleContinue = () => {
        handleStep(step.details, screens.loan_pin)
    }

    return (
        <div className='mt-3 flex flex-col gap-4'>
            <div className='text-input font-semibold w-full flex flex-col gap-4 justify-center items-center'>
                <p className='text-center text-base'>Tenor: 30 Days</p>
                <Label name='Enter Loan Amount' htmlfor='pin' />
                <InputText id='pin' name='pin' type='text' value={pin} handleChange={(e)=>setPin(e.target.value)} />
                <div className='flex flex-col gap-4'>
                    <p className='text-center text-base'>Upfront Interest 200 Naira</p>
                    <p className='text-center text-base'>Due Date: Next Salary or 30 Days</p>
                </div>
                <button onClick={handleContinue} className='p-3 bg-purple-800 text-base sm:text-xl text-white font-bold rounded'>Continue</button>
            </div>
        </div>
    )
}