"use client";

import Link from "next/link";
import { ArrowRightIcon } from "@heroicons/react/24/outline";

export function QuickAction({
  href,
  title,
  description,
  icon: Icon,
  iconColor,
  bgColor,
}: {
  href: string;
  title: string;
  description: string;
  icon: React.ComponentType<React.SVGProps<SVGSVGElement>>;
  iconColor: string;
  bgColor: string;
}) {
  return (
    <Link
      href={href}
      className="flex items-center p-4 rounded-xl border border-transparent hover:border-border/60 hover:bg-muted/50 transition-all duration-200 group"
    >
      <div className={`flex-shrink-0 p-2.5 rounded-xl ${bgColor} border border-primary/10`}>
        <Icon className={`h-5 w-5 ${iconColor}`} />
      </div>
      <div className="ml-4 flex-1 min-w-0">
        <p className="text-sm font-semibold text-foreground group-hover:text-primary transition-colors">
          {title}
        </p>
        <p className="text-xs text-muted-foreground mt-0.5 leading-relaxed">{description}</p>
      </div>
      <ArrowRightIcon className="h-4 w-4 text-muted-foreground/50 group-hover:text-primary group-hover:translate-x-0.5 transition-all" />
    </Link>
  );
}
