"use client";
import { useFormatCurrency } from "@/lib/hooks/useFormatCurrency";
import { useRouter } from "next/navigation";

export function InvoiceItemRow({
  id,
  description,
  amount,
  quantity,
  serviceId,
}: {
  id: number;
  description: string;
  amount: number;
  quantity?: number;
  serviceId?: number;
}) {
  const router = useRouter();
  const { formatCurrency } = useFormatCurrency();
  return (
    <div
      key={id}
      className={`flex items-center justify-between py-3 px-4 rounded-lg border transition-all duration-200 ${
        serviceId
          ? "border-blue-200 bg-blue-50 hover:bg-blue-100 cursor-pointer hover:shadow-sm"
          : "border-gray-200 bg-gray-50"
      }`}
      onClick={serviceId ? () => router.push(`/subscriptions/${serviceId}`) : undefined}
    >
      <div className="flex-1 min-w-0">
        <div
          className={`font-medium text-sm ${serviceId ? "text-blue-900" : "text-gray-900"} truncate`}
        >
          {description}
          {serviceId && <span className="text-blue-600 ml-2">→</span>}
        </div>
        {quantity && quantity > 1 && (
          <div className="text-xs text-gray-600 mt-1">Qty: {quantity}</div>
        )}
        {serviceId && (
          <div className="text-xs text-blue-700 mt-1 font-medium">
            Service #{serviceId} • Click to view
          </div>
        )}
      </div>
      <div className="text-lg font-bold text-gray-900 ml-4 flex-shrink-0">
        {formatCurrency(amount)}
      </div>
    </div>
  );
}
