Assignee picker

"use client"

import * as React from "react"
import { AssigneePicker, type AssigneeCandidate, type AssigneeWho } from "@/components/candor/assignee-picker"

const inDays = (d: number) => new Date(Date.now() + d * 86_400_000).toISOString()
const measured = new Date().toISOString()

/* Load and availability come from the app: what it doesn't know (Lee's) reads as not known. */
const team: AssigneeCandidate[] = [
  { who: { person: { id: "u-ana", name: "Ana Ruiz" } }, availability: "available", load: { open: 3, limit: 6 } },
  { who: { person: { id: "u-jo", name: "Jo Okafor" } }, availability: "away", until: inDays(3), load: { open: 1 } },
  { who: { person: { id: "u-lee", name: "Lee Park" } } },
  { who: { person: { id: "u-kim", name: "Kim Sato" } }, availability: "available", load: { open: 0 }, locked: "Kim is a viewer here and can’t own tasks." },
  { who: { agent: { id: "a-recon", name: "Reconciler", role: "analyst" } }, availability: "busy", load: { open: 8, limit: 8 } },
  { who: { agent: { id: "a-check", name: "Checker", role: "reviewer" } }, availability: "available", load: { open: 2, limit: 10 } },
]

export default function Example() {
  const [assigned, setAssigned] = React.useState<AssigneeWho | null>(null)
  const [saving, setSaving] = React.useState(false)
  const save = (next: AssigneeWho | null) => {
    setSaving(true)
    // Your app saves the assignment, then passes the saved assignee back.
    window.setTimeout(() => {
      setAssigned(next)
      setSaving(false)
    }, 600)
  }
  return (
    <div className="flex max-w-md items-center justify-between gap-3 rounded-lg border bg-card px-4 py-3">
      <span className="min-w-0">
        <span className="block truncate text-sm font-medium">Match March payments to invoices</span>
        <span className="block text-xs text-muted-foreground">Due Friday</span>
      </span>
      <AssigneePicker
        candidates={team}
        assigned={assigned}
        busy={saving}
        updatedAt={measured}
        onAssign={(c) => save(c.who)}
        onUnassign={() => save(null)}
      />
    </div>
  )
}