interface Props{
    IconImg: string;
    PackageTitle: string;
    PackagePrice: string;
    PackageUrl?: string;
}

export function Package(props: Props){
    return(
        <div className="border rounded-3xl p-4 bg-gradient-to-tl from-gray-200 to-white max-w-40 flex-shrink-0">
            <div className="flex items-center mb-2">
                <img src={props.IconImg} alt="icon" className="w-7 h-7 mr-2 object-contain" />
                <h3 className="text-lg font-semibold text-orange-500 leading-tight">{props.PackageTitle}</h3>
            </div>
            <p className="text-lg font-normal mb-1">
                Start from
                <span className="italic"> RM{props.PackagePrice}</span>
            </p>
            <a href={props.PackageUrl} className="text-base text-slate-400 py-2">View {'>'}</a>
        </div>
    )
}