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

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

  const record = data?.data

  const fields = [
    {label: 'ID', data: 'id'},
    {label: 'Tail Number', data: 'tail_number'},
    {label: 'Type', data: 'type'},
    {label: 'City_id', data: 'city_id'},
  ]

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