import type { EmployeePositionChangeRequest } from "@/user-management/services/api/employeePositionChangeRequestService";
import UserPositionApprovalActions, {
  type UserPositionApprovalDecision,
} from "./UserPositionApprovalActions";
import { getDisplayName } from "./userPositionApprovalUtils";

interface UserPositionApprovalCardsProps {
  items: EmployeePositionChangeRequest[];
  onDecision: (
    type: UserPositionApprovalDecision,
    item: EmployeePositionChangeRequest,
  ) => void;
}

export default function UserPositionApprovalCards({
  items,
  onDecision,
}: UserPositionApprovalCardsProps) {
  return (
    <div className="grid gap-4 sm:grid-cols-2 xl:grid-cols-3">
      {items.map((item) => (
        <article
          key={item.id}
          className="rounded-lg border bg-white p-5 shadow-sm dark:border-slate-700 dark:bg-slate-900"
        >
          <h2 className="font-semibold text-slate-900 dark:text-slate-100">
            {getDisplayName(item.employee?.name)}
          </h2>
          <p className="text-sm text-slate-500">
            {item.employee?.user?.email || "-"}
          </p>
          <dl className="my-4 grid grid-cols-[auto_1fr] gap-x-3 gap-y-2 text-sm">
            <dt className="text-slate-500">From</dt>
            <dd>{getDisplayName(item.fromPosition?.name)}</dd>
            <dt className="text-slate-500">To</dt>
            <dd>{getDisplayName(item.toPosition?.name)}</dd>
            <dt className="text-slate-500">Status</dt>
            <dd>{item.status || "PENDING"}</dd>
          </dl>
          <UserPositionApprovalActions item={item} onDecision={onDecision} />
        </article>
      ))}
    </div>
  );
}
