import React, { useState } from 'react'
import { BsQuestionCircle } from "@react-icons/all-files/bs/BsQuestionCircle";
import Radio from '../UI/Radio';
import Button from '../UI/Button';

const Output = () => {
    const [tarif, setTarif] = useState('optimal')
    const [ip, setIp] = useState('')
    return (
        <div className="max-w-[384px] w-full">
            <div className='flex flex-col p-[30px] w-full bg-white rounded-[20px]'>
                <h3 className='text-black font-semibold text-xl mb-[18px] text-center'>Тариф обсулживания</h3>
                <p className='flex items-center text-slate-300 font-normal text-base self-center mb-[25px]'><BsQuestionCircle className='mr-2 text-red-500 text-2xl'/>Подробнее о тарифах</p>
                <div className="flex flex-col pb-5 ">
                    <Radio wrapperClasses='mb-3' label='Статус' name='tarif' value='status' onChange={e=> setTarif(e.target.value)} checked={tarif === 'status' ? true : false}/>
                    <Radio wrapperClasses='mb-3' label='Оптимальный' name='tarif' value='optimal' onChange={e=> setTarif(e.target.value)} checked={tarif === 'optimal' ? true : false}/>
                    <Radio label='Лайт' name='tarif' value='light' onChange={e=> setTarif(e.target.value)} checked={tarif === 'light' ? true : false}/>
                </div>
                <div className="flex flex-col border-y-[1px] border-y-slate-300 py-5">
                    <Radio wrapperClasses='mb-3' label='ИП без работников' name='ip' value='without' onChange={e=> setIp(e.target.value)} checked={ip === 'without' ? true : false}/>
                    <Radio label='ИП с сотрудниками' name='ip' value='with' onChange={e=> setIp(e.target.value)} checked={ip === 'with' ? true : false}/>
                </div>
                <div className="flex flex-col items-center pt-5">
                    <p className='text-black text-xl font-medium mb-[10px]'>Стоимость обслуживания</p>
                    <output className='text-slate-800 text-[42px] font-semibold mb-3'>29500 ₽</output>
                    <Button>Оставить заявку</Button>
                </div>
            </div>
        </div>
    )
}

export default Output;