'use client'

import { useTranslations } from 'next-intl'

// MUI Imports
import Card from '@mui/material/Card'
import CardHeader from '@mui/material/CardHeader'
import CardContent from '@mui/material/CardContent'
import Grid from '@mui/material/Grid2'
import Button from '@mui/material/Button'
import MenuItem from '@mui/material/MenuItem'

// Component Imports
import CustomTextField from '@core/components/mui/TextField'

const CreateApiKey = () => {
  const t = useTranslations('accountSettings')
  const tSecurity = useTranslations('accountSettings.security')

  return (
    <Card>
      <CardHeader title={tSecurity('createApiKey')} />
      <CardContent className='!pb-0'>
        <Grid container spacing={6}>
          <Grid size={{ xs: 12, md: 6 }}>
            <form className='flex justify-end items-end bs-full flex-col gap-5 pbe-6'>
              <CustomTextField select fullWidth label={tSecurity('apiKeyType')} defaultValue=''>
                <MenuItem value='full-control'>{tSecurity('fullControl')}</MenuItem>
                <MenuItem value='modify'>{tSecurity('modify')}</MenuItem>
                <MenuItem value='read-execute'>{tSecurity('readExecute')}</MenuItem>
                <MenuItem value='list-folder-contents'>{tSecurity('listFolderContents')}</MenuItem>
                <MenuItem value='read-only'>{tSecurity('readOnly')}</MenuItem>
                <MenuItem value='read-write'>{tSecurity('readWrite')}</MenuItem>
              </CustomTextField>
              <CustomTextField label={tSecurity('apiKeyName')} placeholder='Server key 1' fullWidth />
              <Button variant='contained' fullWidth>
                {tSecurity('createKey')}
              </Button>
            </form>
          </Grid>
          <Grid size={{ xs: 12, md: 6 }} className='flex items-end justify-center '>
            <img src='/images/illustrations/characters/4.png' width={197} height={224} alt='api illustration' />
          </Grid>
        </Grid>
      </CardContent>
    </Card>
  )
}

export default CreateApiKey
