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

import { AgencySelect } from "./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: {
                    xs: "1fr",
                    sm: "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>
    );
}