export default function Advice({
    title,
    message,
    color,
    className,
}: Advices.Advice) {
    return (
        <div
            className={`relative overflow-hidden text-center md:text-left border-2 ${color.border} ${color.bg} ${className} darkContainer px-8 pb-8 pt-4 rounded-2xl transition-all before:duration-[150ms] before:absolute before:opacity-0 before:w-full before:h-full before:top-0 before:left-0 before:bg-black hover:before:opacity-5`}
        >
            <h2 className={`${color.title} darkTitle text-xl font-bold`}>
                {title}
            </h2>
            <p className={`mt-3 ${color.message} text dark:font-light`}>
                {message}
            </p>
        </div>
    );
}