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 max-md:py-6 max-md:px-6 rounded-[20px] max-w-[430px] max-lg:max-w-none max-xl:max-w-[330px] max-2xl:max-w-[415px] max-lg:mb-[20px] sm:max-lg:basis-[calc(50%-8px)] sm:max-lg:flex-grow sm:max-lg:mr-[15px] 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 max-md:right-3 max-md:top-7">Популярный</span>
            }
            <span className='text-slate-700 text-xl max-md:text-lg font-medium mb-8 max-md:mb-5 inline-block'>{tarif}</span>
            <p className='text-slate-900 text-[50px] max-xl:text-4xl font-semibold mb-8 max-md:mb-5'>{price} <span className='text-slate-600 text-base max-xl:text-sm'>за месяц</span></p>
            <Button className='w-full mb-[70px] max-xl:mb-10'>Посмотреть подробнее</Button>
            <div className="[&>*:last-child]:mb-0">
                {conditions &&
                    conditions.map(condition=>
                        condition.check 
                        ?
                        <p key={condition.id} className="flex text-slate-600 text-base max-md:text-sm 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 max-md:text-sm 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;