import type { MDXComponents } from 'mdx/types'
import {
  Title,
  Text,
  Anchor,
  List,
  ListItem,
  Code,
  Divider,
  Table,
  TableTbody,
  TableTd,
  TableTfoot,
  TableTh,
  TableThead,
  TableTr,
} from '@pikku/mantine/core'

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    h1: (props) => <Title order={1} mt="xl" mb="md" {...props} />,
    h2: (props) => <Title order={2} mt="lg" mb="sm" {...props} />,
    h3: (props) => <Title order={3} mt="md" mb="sm" {...props} />,
    h4: (props) => <Title order={4} mt="md" mb="xs" {...props} />,
    h5: (props) => <Title order={5} mt="sm" mb="xs" {...props} />,
    h6: (props) => <Title order={6} mt="sm" mb="xs" {...props} />,
    p: (props) => <Text mb="md" {...props} />,
    a: (props) => <Anchor {...props} />,
    ul: (props) => <List mb="md" {...props} />,
    ol: (props) => <List mb="md" type="ordered" {...props} />,
    li: (props) => <ListItem {...props} />,
    code: (props) => <Code {...props} />,
    hr: (props) => <Divider my="md" {...props} />,
    strong: (props) => <Text component="strong" fw={700} {...props} />,
    em: (props) => <Text component="em" fs="italic" {...props} />,
    table: (props) => <Table striped highlightOnHover withTableBorder withColumnBorders mb="md" {...props} />,
    thead: (props) => <TableThead {...props} />,
    tbody: (props) => <TableTbody {...props} />,
    tfoot: (props) => <TableTfoot {...props} />,
    tr: (props) => <TableTr {...props} />,
    th: (props) => <TableTh {...props} />,
    td: (props) => <TableTd {...props} />,
    ...components,
  }
}