import { type IssueResponse } from '@/client';
import { type IssueStatus } from './config';
import { STATUS_CONFIG } from './config';
import { BoardCard } from './board-card';
import { Plus } from 'lucide-react';
import { Button } from '@/components/ui/button';

interface BoardColumnProps {
  status: IssueStatus;
  issues: IssueResponse[];
  onCardClick: (issue: IssueResponse) => void;
  onAddIssue: () => void;
}

export function BoardColumn({
  status,
  issues,
  onCardClick,
  onAddIssue,
}: BoardColumnProps) {
  const cfg = STATUS_CONFIG[status];

  return (
    <div
      className={`flex w-[300px] shrink-0 flex-col rounded-xl ${cfg.columnBg} p-2`}
    >
      {/* Column header */}
      <div className="mb-2 flex items-center justify-between px-1.5">
        <div className="flex items-center gap-2">
          <span
            className={`inline-flex items-center gap-1.5 rounded px-2 py-0.5 text-xs font-semibold ${cfg.badgeBg} ${cfg.badgeText}`}
          >
            {cfg.openIcon === '○' ? (
              <svg
                className="h-3 w-3"
                viewBox="0 0 16 16"
                fill="none"
              >
                <circle
                  cx="8"
                  cy="8"
                  r="6"
                  stroke="currentColor"
                  strokeWidth="1.5"
                />
              </svg>
            ) : (
              <svg
                className="h-3 w-3"
                viewBox="0 0 16 16"
                fill="none"
              >
                <circle cx="8" cy="8" r="6" fill="currentColor" />
              </svg>
            )}
            {cfg.label}
          </span>
          <span className="text-xs text-muted-foreground">{issues.length}</span>
        </div>
        <Button
          variant="ghost"
          size="icon-sm"
          className="rounded-full h-6 w-6 text-muted-foreground hover:text-foreground"
          onClick={onAddIssue}
          title="New issue"
        >
          <Plus className="h-3.5 w-3.5" />
        </Button>
      </div>

      {/* Cards */}
      <div className="min-h-[200px] flex-1 space-y-2 overflow-y-auto rounded-lg p-1">
        {issues.map((issue) => (
          <BoardCard
            key={issue.number}
            issue={issue}
            onClick={() => onCardClick(issue)}
          />
        ))}
        {issues.length === 0 && (
          <p className="py-8 text-center text-xs text-muted-foreground">
            No issues
          </p>
        )}
      </div>
    </div>
  );
}
