import {Stack, Typography} from '@mui/material'
import {useShow} from '@refinedev/core'
import {Show, TextFieldComponent as TextField} from '@refinedev/mui'

export const CityShow = () => {
  const {query} = useShow({})
  const {data, isLoading} = query

  const record = data?.data

  const fields = [
    // {label: 'ID', data: 'id'},
    {label: 'Название', data: 'name'},
    // {label: 'Код страны', data: 'country_code'},
    {label: 'Страна', data: 'country'},
    {label: 'Герб', data: 'arms', render: (value: number) => <img src={`https://wn.krbl.ru/media/${value}/download`} alt={String(value)} style={{maxWidth: '10%', objectFit: 'contain', borderRadius: 8}} />},
  ]

  return (
    <Show isLoading={isLoading}>
      <Stack gap={4}>
        {fields.map(({label, data, render}) => (
          <Stack key={data} gap={1}>
            <Typography variant="body1" fontWeight="bold">
              {label}
            </Typography>

            {render ? render(record?.[data]) : <TextField value={record?.[data]} />}
          </Stack>
        ))}
      </Stack>
    </Show>
  )
}