import * as React from 'react'
import { cn } from '@/lib/utils'
import { Scrollbar } from './scrollbar'

export type TypographyH1Props = React.ComponentProps<'h1'>
function TypographyH1({ className, ...props }: TypographyH1Props) {
  return (
    <h1
      className={cn(
        'font-sans scroll-m-20 text-4xl font-extrabold tracking-tight text-balance text-text',
        className
      )}
      {...props}
    />
  )
}
TypographyH1.displayName = 'TypographyH1'

export type TypographyH2Props = React.ComponentProps<'h2'>
function TypographyH2({ className, ...props }: TypographyH2Props) {
  return (
    <h2
      className={cn(
        'font-sans scroll-m-20 border-b border-border-tertiary pb-2 text-3xl font-semibold tracking-tight first:mt-0 text-text',
        className
      )}
      {...props}
    />
  )
}
TypographyH2.displayName = 'TypographyH2'

export type TypographyH3Props = React.ComponentProps<'h3'>
function TypographyH3({ className, ...props }: TypographyH3Props) {
  return (
    <h3
      className={cn(
        'font-sans scroll-m-20 text-2xl font-semibold tracking-tight text-text',
        className
      )}
      {...props}
    />
  )
}
TypographyH3.displayName = 'TypographyH3'

export type TypographyH4Props = React.ComponentProps<'h4'>
function TypographyH4({ className, ...props }: TypographyH4Props) {
  return (
    <h4
      className={cn(
        'font-sans scroll-m-20 text-xl font-semibold tracking-tight text-text',
        className
      )}
      {...props}
    />
  )
}
TypographyH4.displayName = 'TypographyH4'

export type TypographyPProps = React.ComponentProps<'p'>
function TypographyP({ className, ...props }: TypographyPProps) {
  return (
    <p
      className={cn(
        'font-sans leading-7 text-text [&:not(:first-child)]:mt-6',
        className
      )}
      {...props}
    />
  )
}
TypographyP.displayName = 'TypographyP'

export type TypographyBlockquoteProps = React.ComponentProps<'blockquote'>
function TypographyBlockquote({ className, ...props }: TypographyBlockquoteProps) {
  return (
    <blockquote
      className={cn(
        'font-sans mt-6 border-l-2 border-border-tertiary pl-6 italic text-text-secondary',
        className
      )}
      {...props}
    />
  )
}
TypographyBlockquote.displayName = 'TypographyBlockquote'

export type TypographyTableProps = React.ComponentProps<'div'>
function TypographyTable({ className, children, ..._rest }: TypographyTableProps) {
  void _rest
  return (
    <Scrollbar
      scrollbarVisibility="auto"
      className={cn('font-sans my-6 w-full', className)}
    >
      {children}
    </Scrollbar>
  )
}
TypographyTable.displayName = 'TypographyTable'

export type TypographyListProps = React.ComponentProps<'ul'>
function TypographyList({ className, ...props }: TypographyListProps) {
  return (
    <ul
      className={cn(
        'font-sans my-6 ml-6 list-disc text-text [&>li]:mt-2',
        className
      )}
      {...props}
    />
  )
}
TypographyList.displayName = 'TypographyList'

export type TypographyInlineCodeProps = React.ComponentProps<'code'>
function TypographyInlineCode({ className, ...props }: TypographyInlineCodeProps) {
  return (
    <code
      className={cn(
        'relative rounded bg-fill-secondary px-1 py-0.5 font-mono text-sm font-semibold text-text',
        className
      )}
      {...props}
    />
  )
}
TypographyInlineCode.displayName = 'TypographyInlineCode'

export type TypographyLeadProps = React.ComponentProps<'p'>
function TypographyLead({ className, ...props }: TypographyLeadProps) {
  return (
    <p
      className={cn(
        'font-sans text-xl text-muted-foreground',
        className
      )}
      {...props}
    />
  )
}
TypographyLead.displayName = 'TypographyLead'

export type TypographyLargeProps = React.ComponentProps<'div'>
function TypographyLarge({ className, ...props }: TypographyLargeProps) {
  return (
    <div
      className={cn(
        'font-sans text-lg font-semibold text-text',
        className
      )}
      {...props}
    />
  )
}
TypographyLarge.displayName = 'TypographyLarge'

export type TypographySmallProps = React.ComponentProps<'small'>
function TypographySmall({ className, ...props }: TypographySmallProps) {
  return (
    <small
      className={cn(
        'font-sans text-sm font-medium leading-none text-text',
        className
      )}
      {...props}
    />
  )
}
TypographySmall.displayName = 'TypographySmall'

export type TypographyMutedProps = React.ComponentProps<'p'>
function TypographyMuted({ className, ...props }: TypographyMutedProps) {
  return (
    <p
      className={cn(
        'font-sans text-sm text-muted-foreground',
        className
      )}
      {...props}
    />
  )
}
TypographyMuted.displayName = 'TypographyMuted'

export {
  TypographyH1,
  TypographyH2,
  TypographyH3,
  TypographyH4,
  TypographyP,
  TypographyBlockquote,
  TypographyTable,
  TypographyList,
  TypographyInlineCode,
  TypographyLead,
  TypographyLarge,
  TypographySmall,
  TypographyMuted,
}