import { useState } from 'react'
import type { Org } from '../api/client'
import StatusBadge from './StatusBadge'

interface Props {
  orgs: Org[]
  selectedId: number | null
  onSelect: (id: number) => void
}

export default function OrgList({ orgs, selectedId, onSelect }: Props) {
  const [keyword, setKeyword] = useState('')

  const visible = orgs.filter((org) => org.orgName.includes(keyword))

  return (
    <div className="flex h-full w-80 flex-col border-r border-gray-200">
      <div className="border-b border-gray-200 p-3">
        <input
          className="w-full rounded-md border border-gray-300 px-3 py-2 text-sm"
          placeholder="기관명 검색"
          value={keyword}
          onChange={(e) => setKeyword(e.target.value)}
        />
      </div>

      <ul className="flex-1 overflow-y-auto">
        {visible.map((org) => (
          <li key={org.id}>
            <button
              type="button"
              onClick={() => onSelect(org.id)}
              className={`flex w-full items-center gap-2 px-3 py-2 text-left hover:bg-gray-50 ${
                selectedId === org.id ? 'bg-blue-50' : ''
              }`}
            >
              <span className="w-9 shrink-0 text-xs text-gray-500">{org.orgNo}</span>
              <span className="flex-1 truncate text-sm">{org.orgName}</span>
              <StatusBadge status={org.status} />
            </button>
          </li>
        ))}
      </ul>
    </div>
  )
}