"use client";

import Link from "next/link";

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 hover:bg-gray-50 transition-colors group"
    >
      <div className={`flex-shrink-0 p-2 rounded-lg ${bgColor}`}>
        <Icon className={`h-5 w-5 ${iconColor}`} />
      </div>
      <div className="ml-3 flex-1">
        <p className="text-sm font-semibold text-gray-900 group-hover:text-blue-600 transition-colors">
          {title}
        </p>
        <p className="text-xs text-gray-500">{description}</p>
      </div>
      <svg
        className="h-4 w-4 text-gray-400 group-hover:text-blue-600 transition-colors"
        viewBox="0 0 20 20"
        fill="currentColor"
      >
        <path
          fillRule="evenodd"
          d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
          clipRule="evenodd"
        />
      </svg>
    </Link>
  );
}
