"use client";

import * as React from "react";
import { cn } from "@/lib/utils";

export function DetailItemAssigneeChips({
  label,
  names,
  icon,
  className,
}: {
  label: string;
  names: readonly string[];
  icon?: React.ReactNode;
  className?: string;
}) {
  const trimmed = names.map((n) => n.trim()).filter(Boolean);
  return (
    <div
      className={cn(
        "min-w-0 p-4 rounded-2xl bg-gray-50/50 border border-gray-100/80 transition-all hover:bg-white hover:border-[#6C63FF]/20 group",
        className,
      )}
    >
      <div className="flex items-center gap-2 mb-2 min-w-0">
        {icon && (
          <span className="text-gray-400 group-hover:text-[#6C63FF] transition-colors shrink-0">
            {icon}
          </span>
        )}
        <span className="text-[10px] font-medium text-gray-400 uppercase tracking-widest font-['Lexend_Deca'] truncate">
          {label}
        </span>
      </div>
      {trimmed.length > 0 ? (
        <div className="flex flex-wrap gap-1.5">
          {trimmed.map((name, i) => (
            <span
              key={`${name}-${i}`}
              className="inline-flex max-w-full items-center rounded-full border border-[#6C63FF]/20 bg-gradient-to-b from-white to-[#6C63FF]/[0.07] px-3 py-1 text-[12px] font-semibold text-[#4338ca] shadow-sm font-['Lexend'] ring-1 ring-black/[0.03]"
            >
              <span className="truncate">{name}</span>
            </span>
          ))}
        </div>
      ) : (
        <p className="text-[15px] font-medium text-gray-400 font-['Lexend']">—</p>
      )}
    </div>
  );
}