"use client";

import { ClipboardCheck } from "lucide-react";
import type { PopWorkDetailConfig } from "../types";

interface PopWorkDetailPreviewProps {
  config?: PopWorkDetailConfig;
}

export function PopWorkDetailPreviewComponent({ config }: PopWorkDetailPreviewProps) {
  const labels = config?.phaseLabels ?? { PRE: "작업 전", IN: "작업 중", POST: "작업 후" };
  return (
    <div className="flex h-full w-full flex-col items-center justify-center gap-1 p-2">
      <ClipboardCheck className="h-6 w-6 text-muted-foreground" />
      <span className="text-[10px] font-medium text-muted-foreground">
        작업 상세
      </span>
      <div className="flex gap-1">
        {Object.values(labels).map((l) => (
          <span
            key={l}
            className="rounded bg-muted/60 px-1.5 py-0.5 text-[8px] text-muted-foreground"
          >
            {l}
          </span>
        ))}
      </div>
    </div>
  );
}