import React from 'react'

import Button from '../UI/Button';
import { BsCheck } from "@react-icons/all-files/bs/BsCheck";
import { BsDash } from "@react-icons/all-files/bs/BsDash";

const Price = ({tarif, price, conditions, popular, ...props}) => {
    return (
        <div className='bg-white py-8 px-9 rounded-[20px] max-w-[430px] relative' {...props}>
            {popular &&
                <span className="inline-block text-white font-medium text-xs bg-amber-500 py-1 px-3 rounded-[36px] absolute top-8 right-9">Популярный</span>
            }
            <span className='text-slate-700 text-xl font-medium mb-8 inline-block'>{tarif}</span>
            <p className='text-slate-900 text-[50px] font-semibold mb-8'>{price} <span className='text-slate-600 text-base'>за месяц</span></p>
            <Button className='w-full mb-[70px]'>Посмотреть подробнее</Button>
            <div className="[&>*:last-child]:mb-0">
                {conditions &&
                    conditions.map(condition=>
                        condition.check 
                        ?
                        <p key={condition.id} className="flex text-slate-600 text-base font-medium leading-6 mb-4"><span className='w-5 h-5 bg-red-500 mt-1 block rounded-full text-white text-xl mr-[14px]'><BsCheck/></span>{condition.text}</p>
                        :
                        <p key={condition.id} className="flex text-slate-600 text-base font-medium leading-6 mb-4"><span className='w-5 h-5 bg-gray-400 mt-1 block rounded-full text-white text-xl mr-[14px]'><BsDash/></span>{condition.text}</p>
                    )
                }   
            </div>
        </div>
    )
}

export default Price;