"use client";

import type { Part } from "@/types/builderSlots";

interface PartCardProps {
  part: Part;
  selected?: boolean;
  onSelect: () => void;
}

export function PartCard({ part, selected, onSelect }: PartCardProps) {
  return (
    <button
      type="button"
      onClick={onSelect}
      className={`w-full text-left border rounded-md p-3 mb-2 transition 
      ${
        selected
          ? "border-amber-400 bg-zinc-900"
          : "border-zinc-700 hover:border-zinc-500"
      }`}
    >
      <div className="flex justify-between items-center gap-2">
        <div>
          <div className="text-sm font-semibold text-zinc-50">
            {part.brand} <span className="font-normal">— {part.name}</span>
          </div>
          {part.notes && (
            <p className="mt-1 text-xs text-zinc-400 line-clamp-2">
              {part.notes}
            </p>
          )}
        </div>
        <div className="text-sm font-semibold text-amber-300 whitespace-nowrap">
          ${part.price.toFixed(2)}
        </div>
      </div>
    </button>
  );
}