import { AppFormField } from "@/components/ui/form";
import { AppSelect, type AppSelectOption } from "@/components/ui/select";
import { AgencyDisplay } from "@/features/pswg/working-group-issues/components/create-issuses/agency-display";
import type { Agency } from "@/features/pswg/working-group-issues/components/create-issuses/add-working-group-issue-dialog-types";

type AgencySelectProps = {
  options: AppSelectOption<Agency>[];
  menuOptions?: AppSelectOption<Agency>[];
  label: string;
  onChange: (value: string) => void;
  value: string;
};

export function AgencySelect({
  label,
  menuOptions,
  onChange,
  options,
  value,
}: AgencySelectProps) {
  return (
    <AppFormField label={label}>
      <AppSelect
        displayEmpty
        value={value}
        options={options}
        menuOptions={menuOptions}
        placeholder="Select Agency"
        onChange={onChange}
        renderSelectedValue={(option) => (
          <AgencyDisplay agency={option?.data} />
        )}
        renderOption={(option) => <AgencyDisplay agency={option.data} />}
      />
    </AppFormField>
  );
}