import MiniButtonSetting from "@ui_kit/MiniButtonSetting";
import React from "react";
import {Box, IconButton, useTheme} from "@mui/material";
import NameIcon from "@icons/ContactFormIcon/NameIcon";
import EmailIcon from "@icons/ContactFormIcon/EmailIcon";
import PhoneIcon from "@icons/ContactFormIcon/PhoneIcon";
import TextIcon from "@icons/ContactFormIcon/TextIcon";
import AddressIcon from "@icons/ContactFormIcon/AddressIcon";

interface Props {
    switchState: string
    SSHC: (data:string) => void
}

export default function ButtonsNewField ({SSHC, switchState}:Props) {
    const theme = useTheme();
    const buttonSetting: {icon: JSX.Element; title: string; value: string} [] =[
        {icon: <NameIcon color={switchState === 'name' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Имя', value: 'name'},
        {icon: <EmailIcon color={switchState === 'email' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Email', value: 'email'},
        {icon: <PhoneIcon color={switchState === 'phone' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Телефон', value: 'phone'},
        {icon: <TextIcon color={switchState === 'text' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Текст', value: 'text'},
        {icon: <AddressIcon color={switchState === 'address' ? '#ffffff' : theme.palette.grey3.main}/>, title: 'Адрес', value: 'address'},
    ]

    return (
            <Box
                sx={{
                    padding: '20px',
                    display: 'flex',
                    gap: '10px'
                }}
            >
                {buttonSetting.map( (e,i) => (
                    <MiniButtonSetting
                        key={i}
                        onClick={()=>{SSHC(e.value)}}
                        sx={{backgroundColor: switchState === e.value ? theme.palette.brightPurple.main : 'transparent',
                            color: switchState === e.value ? '#ffffff' : theme.palette.grey3.main,
                        }}
                    >
                        {e.icon}
                        {e.title}
                    </MiniButtonSetting>
                ))}
            </Box>
    )
}