// app/components/Modals/ModalAction.tsx

import React from 'react';

interface ModalActionProps {
    href: string;
    children: React.ReactNode;
    className?: string; // To allow for specific margins like mt-5
}

export default function ModalAction({ href, children, className = "" }: ModalActionProps) {
    return (
        <a
            href={href}
            target={href.startsWith('http') ? "_blank" : undefined}
            rel={href.startsWith('http') ? "noreferrer" : undefined}
            className={`
                text-white bg-[#406185] uppercase font-bold py-2.25 px-11.5 
                rounded-[50px] text-[1rem] text-center transition-all duration-300 
                hover:opacity-90 hover:scale-105 active:scale-95 shadow-md 
                hover:shadow-lg inline-block ${className}
            `}
        >
            {children}
        </a>
    );
}