"use client";

import React from "react";
import { StatusType } from "./types";

interface StatusCounts {
  waitingCount: number;
  pendingAcceptCount: number;
  inProgressCount: number;
  completedCount: number;
}

interface PopStatusTabsProps {
  currentStatus: StatusType;
  counts: StatusCounts;
  onStatusChange: (status: StatusType) => void;
}

const STATUS_CONFIG: {
  id: StatusType;
  label: string;
  detail: string;
  countKey: keyof StatusCounts;
}[] = [
  { id: "waiting", label: "대기", detail: "내 공정 이전", countKey: "waitingCount" },
  { id: "pending-accept", label: "접수대기", detail: "내 차례", countKey: "pendingAcceptCount" },
  { id: "in-progress", label: "진행", detail: "작업중", countKey: "inProgressCount" },
  { id: "completed", label: "완료", detail: "처리완료", countKey: "completedCount" },
];

export function PopStatusTabs({ currentStatus, counts, onStatusChange }: PopStatusTabsProps) {
  return (
    <div className="pop-status-tabs">
      {STATUS_CONFIG.map((status) => (
        <div
          key={status.id}
          className={`pop-status-tab ${currentStatus === status.id ? "active" : ""}`}
          onClick={() => onStatusChange(status.id)}
        >
          <span className="pop-status-tab-label">{status.label}</span>
          <span className="pop-status-tab-count">{counts[status.countKey]}</span>
          <span className="pop-status-tab-detail">{status.detail}</span>
        </div>
      ))}
    </div>
  );
}