// app/components/ui/ActionLinkCard.tsx

import { ArrowRight } from 'lucide-react';
import Link from 'next/link';

interface ActionLinkCardProps {
    href: string;
    title: string;
    description: string;
}

export function ActionLinkCard({ href, title, description }: ActionLinkCardProps) {
    return (
        <Link
            href={href}
            className="group bg-white/40 backdrop-blur-md border border-white/40 p-5 rounded-3xl shadow-sm hover:shadow-md hover:bg-white/50 transition-all duration-300 flex flex-col gap-2"
        >
            <div className="flex items-center gap-3">
                <div className="bg-white w-10 h-10 rounded-xl flex items-center justify-center shrink-0 text-slate-teal group-hover:bg-seafoam group-hover:text-eggshell transition-colors shadow-sm">
                    <ArrowRight size={20} className="group-hover:rotate-45 transition-transform" />
                </div>
                <h3 className="font-black text-ebony text-lg uppercase tracking-wide leading-tight">
                    {title}
                </h3>
            </div>
            <p className="text-sm text-ebony/70 font-medium leading-relaxed w-full m-0 pl-1">
                {description}
            </p>
        </Link>
    );
}