import { FC, ReactNode } from 'react'

type Props = {
    icon: ReactNode,
    title: string,
    description: string
}

const InfoBox: FC<Props> = (props: Props) => {
    return (
        <div className='flex-1 min-h-[185px] bg-gradient-to-r from-[#f9fafc] to-[#f1f3f8] rounded-4xl p-6 border-[3px] border-white '>
            <div className='flex items-center gap-4'>
                <div className="size-12 flex items-center justify-center bg-gradient-to-b from-[#f9fafc] to-[#f1f3f8] rounded-2xl shadow-[inset_4px_4px_6px_#e2e5ec,inset_-4px_-4px_6px_#ffffff] ">
                    {props.icon}
                </div>

                <div className='flex-1'>
                    <h3 className='xl:text-lg font-bold'>
                        {props.title}
                    </h3>
                </div>
            </div>

            <p className='mt-3 text-description leading-6 text-sm'>
                {props.description}
            </p>
        </div>
    )
}

export default InfoBox