import Box from "@mui/material/Box";

import { AgencySelect } from "@/features/pswg/working-group/components/add-working-group-issue-dialog/agency-select";

type AdditionalAgencyFieldsProps = {
  fifthAgency: string;
  fourthAgency: string;
  onFifthAgencyChange: (value: string) => void;
  onFourthAgencyChange: (value: string) => void;
  onSecondAgencyChange: (value: string) => void;
  onThirdAgencyChange: (value: string) => void;
  secondAgency: string;
  thirdAgency: string;
};

export function AdditionalAgencyFields({
  fifthAgency,
  fourthAgency,
  onFifthAgencyChange,
  onFourthAgencyChange,
  onSecondAgencyChange,
  onThirdAgencyChange,
  secondAgency,
  thirdAgency,
}: AdditionalAgencyFieldsProps) {
  return (
    <Box sx={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 2 }}>
      <AgencySelect
        label="Second Agency"
        value={secondAgency}
        onChange={onSecondAgencyChange}
      />
      <AgencySelect
        label="Third Agency"
        value={thirdAgency}
        onChange={onThirdAgencyChange}
      />
      <AgencySelect
        label="Fourth Agency"
        value={fourthAgency}
        onChange={onFourthAgencyChange}
      />
      <AgencySelect
        label="Fifth Agency"
        value={fifthAgency}
        onChange={onFifthAgencyChange}
      />
    </Box>
  );
}