'use client';

import React from 'react';
import { Box, TextField, MenuItem } from '@mui/material';
import { IRegisterProps } from '@/components/layout/landing-layout/header/components/IRegisterModal';
import useMainFetch from '@/hooks/useMainFetch';

export function IRegisterThirdStep({ formData, formDataChanging, dataErrors }: IRegisterProps) {
    const { data } = useMainFetch({
        key: 'branches',
        endpoint: '/branches',
    });

    const branchOptions = data?.data?.data?.map((item: { option: string; nameUz: string; nameRu: string; nameEn: string }) => {


        return {
            value: item.option,
            label: item.nameUz,
        };
    });

    return (
        <Box component='form' display='flex' flexDirection='column' gap={2}>
            <TextField
                label='Manzil'
                variant='outlined'
                fullWidth
                value={formData.address}
                error={dataErrors.address}
                onChange={e => formDataChanging({ key: 'address', value: e.target.value })}
            />

            <TextField
                label='Qulay filial tanlash'
                variant='outlined'
                fullWidth
                select
                value={formData.filial}
                error={dataErrors.filial}
                onChange={e => formDataChanging({ key: 'filial', value: e.target.value })}
            >
                {branchOptions?.map((option: {value: string; label: string}) => (
                    <MenuItem key={option.value} value={option.value}>
                        {option.label}
                    </MenuItem>
                ))}
            </TextField>
        </Box>
    );
}
