import { InertiaLinkProps, Link } from "@inertiajs/react";

export default function Card({
    className = "",
    title,
    content,
    disabled,
    children,
    ...props
}: InertiaLinkProps) {
    return (
        <div className="w-80 h-50 mx-auto bg-babolygo-ocean  shadow-md rounded-lg overflow-hidden mb-6">
            <div className="p-3">
                <h2 className="text-2xl font-bold text-babolygo-pink text-center">
                    {title}
                </h2>
                <p className="mt-2 text-black ">{content}</p>
            </div>
            <div className="flex items-center justify-center p-3">
                <Link
                    {...props}
                    className={
                        `inline-flex items-center justify-center rounded-3xl px-4 py-2 bg-babolygo-purple border border-transparent font-semibold text-xs text-white uppercase tracking-widest hover:bg-purple-800  focus:bg-purple-800  active:bg-purple-900  focus:outline-none focus:ring-2 focus:ring-purple-800 focus:ring-offset-2 transition ease-in-out duration-150 ${
                            disabled && "opacity-25"
                        } ` + className
                    }
                >
                    {children}
                </Link>
            </div>
        </div>
    );
}