"use client";

import Link from "next/link";
import type { Category, Part } from "@/types/gunbuilder";
import { PartCard } from "@/components/PartCard";

interface CategoryColumnProps {
  category: Category;
  parts: Part[];
  selectedPartId?: string;
  onSelectPart: (partId: string) => void;
}

export function CategoryColumn({
  category,
  parts,
  selectedPartId,
  onSelectPart,
}: CategoryColumnProps) {
  // Show selected part if available, otherwise show placeholder
  const displayedPart = selectedPartId
    ? parts.find((p) => p.id === selectedPartId)
    : null;

  return (
    <div className="flex flex-col h-full">
      <div className="mb-3">
        <h2 className="text-xs font-semibold tracking-[0.15em] text-zinc-400 uppercase">
          {category.name}
        </h2>
      </div>
      <div className="flex-1 overflow-y-auto pr-1">
        {parts.length === 0 && (
          <p className="text-xs text-zinc-500">No parts yet for this category.</p>
        )}
        {!displayedPart && parts.length > 0 && (
          <div className="w-full border border-zinc-700 rounded-md p-3 mb-2 text-center">
            <p className="text-sm text-zinc-500 flex items-center justify-center gap-2">
              <svg
                className="w-4 h-4"
                fill="none"
                stroke="currentColor"
                viewBox="0 0 24 24"
              >
                <path
                  strokeLinecap="round"
                  strokeLinejoin="round"
                  strokeWidth={2}
                  d="M12 4v16m8-8H4"
                />
              </svg>
              Choose a Part
            </p>
          </div>
        )}
        {displayedPart && (
          <PartCard
            key={displayedPart.id}
            part={displayedPart}
            selected={displayedPart.id === selectedPartId}
            onSelect={() => onSelectPart(displayedPart.id)}
          />
        )}
      </div>
      {parts.length > 1 && (
        <Link
          href={`/gunbuilder/${category.id}`}
          className="mt-2 w-full rounded-md border border-zinc-700 bg-zinc-900/50 px-3 py-2 text-xs font-medium text-zinc-300 hover:bg-zinc-800 hover:border-zinc-600 transition-colors text-center"
        >
          View All ({parts.length})
        </Link>
      )}
    </div>
  );
}