import { Add } from 'iconsax-react'
import { FC, useState } from 'react'
import DefaulModal from '../../../components/DefaulModal'
import { useTranslation } from 'react-i18next'
import Input from '../../../components/Input'
import Select from '../../../components/Select'

const BoxNewAccessbility: FC = () => {

    const [open, setOpen] = useState<boolean>(false)
    const { t } = useTranslation('global')

    return (
        <>
            <div
                onClick={() => setOpen(true)}
                className="flex-1 flex justify-center items-center h-[160px]"
                style={{
                    position: 'relative',
                }}
            >
                <svg
                    width="100%"
                    height="100%"
                    xmlns="http://www.w3.org/2000/svg"
                    style={{
                        position: 'absolute',
                        top: 0,
                        left: 0,
                        zIndex: -1,
                        borderRadius: '22px',
                    }}
                >
                    <rect
                        width="100%"
                        height="100%"
                        fill="none"
                        // rx="22"
                        ry="22"
                        stroke="#8C90A3"
                        strokeWidth="2"
                        strokeDasharray="6,14"
                    // strokeDashoffset="25"
                    />
                </svg>
                <div style={{ zIndex: 1 }}>
                    <Add size={38} color="#8C90A3" />
                </div>


            </div>

            <DefaulModal
                open={open}
                close={() => setOpen(false)}
                isHeader={true}
                title_header={t('home.create_new_access')}
            >
                <div className='mt-6'>
                    <div className='flex  items-center gap-6'>
                        <div className='min-w-[210px]'>
                            <Input
                                variant='search'
                                className='bg-opacity-25 bg-white'
                            />
                        </div>

                        <Select
                            items={[
                                { value: '1', label: '1' },
                                { value: '2', label: '2' },
                                { value: '3', label: '3' },
                            ]}
                            placeholder={t('all')}
                            className='bg-opacity-25 bg-white w-[100px]'
                        />
                    </div>

                    <div className='mt-6 flex flex-wrap gap-6'>
                        <div className='flex-1 min-w-[40%] flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
                            <div className='flex gap-4'>
                                <div className='size-10 rounded-xl bg-red-300'></div>
                                <div>
                                    <div className='text-sm'>
                                        دی منو
                                    </div>
                                    <div className='text-xs text-description'>
                                        منو رستوران
                                    </div>
                                </div>
                            </div>
                            <div>
                                {/* <input type='checkbox' /> */}
                            </div>
                        </div>
                        <div className='flex-1 min-w-[40%] flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
                            <div className='flex gap-4'>
                                <div className='size-10 rounded-xl bg-blue-300'></div>
                                <div>
                                    <div className='text-sm'>
                                        دی منو
                                    </div>
                                    <div className='text-xs text-description'>
                                        منو رستوران
                                    </div>
                                </div>
                            </div>
                            <div>
                                {/* <input type='checkbox' /> */}
                            </div>
                        </div>
                        <div className='flex-1 min-w-[40%] flex justify-between items-center border-b border-[#8C90A3] border-opacity-30 py-2'>
                            <div className='flex gap-4'>
                                <div className='size-10 rounded-xl bg-green-300'></div>
                                <div>
                                    <div className='text-sm'>
                                        دی منو
                                    </div>
                                    <div className='text-xs text-description'>
                                        منو رستوران
                                    </div>
                                </div>
                            </div>
                            <div>
                                {/* <input type='checkbox' /> */}
                            </div>
                        </div>
                        <div className='flex-1 min-w-[40%]'></div>
                    </div>
                </div>
            </DefaulModal>
        </>
    )
}

export default BoxNewAccessbility