import React from "react";
import { useRouter } from 'next/router';

interface VinPartCardProps {
  n?: number;
  oem: string;
  name: string;
  onPriceClick?: () => void;
}

const VinPartCard: React.FC<VinPartCardProps> = ({ n, oem, name, onPriceClick }) => {
  const router = useRouter();
  const handlePriceClick = (e: React.MouseEvent) => {
    e.preventDefault();
    if (onPriceClick) onPriceClick();
    if (oem) router.push(`/search?q=${encodeURIComponent(oem)}&mode=parts`);
  };

  return (
    <div className="w-layout-hflex knotlistitem">
      <div className="w-layout-hflex flex-block-116">
        {n !== undefined && <div className="nuberlist">{n}</div>}
        <div className="oemnuber">{oem}</div>
      </div>
      <div className="partsname">{name}</div>
      <div className="w-layout-hflex flex-block-117">
        <a href="#" className="button-3 w-button" onClick={handlePriceClick}>Цена</a>
        <div className="code-embed-16 w-embed">
          <svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
            <path d="M8.1 13.5H9.89999V8.1H8.1V13.5ZM8.99999 6.3C9.25499 6.3 9.46889 6.2136 9.64169 6.0408C9.81449 5.868 9.90059 5.6544 9.89999 5.4C9.89939 5.1456 9.81299 4.932 9.64079 4.7592C9.46859 4.5864 9.25499 4.5 8.99999 4.5C8.745 4.5 8.53139 4.5864 8.35919 4.7592C8.187 4.932 8.1006 5.1456 8.1 5.4C8.0994 5.6544 8.1858 5.8683 8.35919 6.0417C8.53259 6.2151 8.74619 6.3012 8.99999 6.3ZM8.99999 18C7.755 18 6.585 17.7636 5.49 17.2908C4.395 16.818 3.4425 16.1769 2.6325 15.3675C1.8225 14.5581 1.1814 13.6056 0.709201 12.51C0.237001 11.4144 0.000601139 10.2444 1.13924e-06 9C-0.00059886 7.7556 0.235801 6.5856 0.709201 5.49C1.1826 4.3944 1.8237 3.4419 2.6325 2.6325C3.4413 1.8231 4.3938 1.182 5.49 0.7092C6.5862 0.2364 7.7562 0 8.99999 0C10.2438 0 11.4138 0.2364 12.51 0.7092C13.6062 1.182 14.5587 1.8231 15.3675 2.6325C16.1763 3.4419 16.8177 4.3944 17.2917 5.49C17.7657 6.5856 18.0018 7.7556 18 9C17.9982 10.2444 17.7618 11.4144 17.2908 12.51C16.8198 13.6056 16.1787 14.5581 15.3675 15.3675C14.5563 16.1769 13.6038 16.8183 12.51 17.2917C11.4162 17.7651 10.2462 18.0012 8.99999 18Z" fill="currentcolor" />
          </svg>
        </div>
      </div>
    </div>
  );
};

export default VinPartCard;