import { useBasedTranslation } from '@based/i18n'
import { Badge, type Fields, Table, Text, colors, radius } from '@based/ui'
import type { TranslationsType } from '../i18n'
import { Title } from './title'

export const Api = ({
  title,
  description,
  props,
}: Based.UI.Playground.Content.Api) => {
  const t = useBasedTranslation<TranslationsType>()
  const api = Object.values(props)
  const fields: Fields = {
    name: {
      key: 'name',
      render: (data) => (
        <Text variant="display-mono" color="neutral80">
          {data.name}
        </Text>
      ),
      table: {
        title: t('content.api.table.name'),
      },
    },
    type: {
      key: 'type',
      render: (data) => (
        <Text variant="display-medium" color="neutral80">
          {data.type.name}
        </Text>
      ),
      table: {
        title: t('content.api.table.type'),
      },
    },
    default: {
      key: 'default',
      render: (data) => (
        <Text variant="display-medium" color="neutral80">
          {data.defaultValue ? data.defaultValue.value : 'N/A'}
        </Text>
      ),
      table: {
        title: t('content.api.table.default'),
      },
    },
    required: {
      key: 'required',
      render: (data) =>
        data.required ? (
          <Badge color="neutral-fill" leadIcon="checkmark">
            {t('content.api.table.required')}
          </Badge>
        ) : (
          <Badge color="neutral-subtle" leadIcon="close">
            {t('content.api.table.notRequired')}
          </Badge>
        ),
      table: {
        title: t('content.api.table.required'),
      },
    },
    description: {
      key: 'description',
      render: (data) => (
        <Text variant="display-medium" color="neutral80">
          {data.description}
        </Text>
      ),
      table: {
        title: t('content.api.table.description'),
      },
    },
  }

  return (
    <div
      id="api"
      style={{
        marginTop: 72,
        marginBottom: 72,
      }}
    >
      <div
        style={{
          display: 'flex',
          flexDirection: 'column',
          gap: 8,
          marginBottom: 16,
        }}
      >
        <Title variant="title-medium-small">{title}</Title>
        <Text variant="display-regular" color="neutral60">
          {description}
        </Text>
      </div>

      <div
        style={{
          border: `1px solid ${colors.neutral20Adjusted}`,
          borderSpacing: 0,
          borderCollapse: 'separate',
          overflow: 'hidden',
          borderRadius: radius[16],
        }}
      >
        <Table
          fields={fields}
          rowHeight="large"
          data={api}
          layout="showAllColumns"
        />
      </div>
    </div>
  )
}
