import { clsx } from 'clsx'

export function Heading({ as: Component = 'h1', className, children, ...props }) {
  return (
    <Component
      className={clsx(
        'text-4xl font-bold tracking-tight text-gray-900 sm:text-5xl',
        className
      )}
      {...props}
    >
      {children}
    </Component>
  )
}

export function H2({ className, children, ...props }) {
  return (
    <h2
      className={clsx(
        'mt-8 text-2xl font-medium tracking-tight text-bg-darkbrown sm:text-3xl',
        className
      )}
      {...props}
    >
      {children}
    </h2>
  )
}

export function H3({ className, children, ...props }) {
  return (
    <h3
      className={clsx(
        'mt-8 text-xl font-medium tracking-tight text-bg-darkbrown lg:text-2xl',
        className
      )}
      {...props}
    >
      {children}
    </h3>
  )
}

export function H4({ className, children, ...props }) {
  return (
    <h4
      className={clsx(
        'text-base font-medium tracking-tight text-bg-darkbrown lg:text-lg',
        className
      )}
      {...props}
    >
      {children}
    </h4>
  )
}

export function P({ className, children, ...props }) {
  return (
    <p
      className={clsx(
        'mt-4 text-lg/8 text-gray-700 font-extralight leading-tight',
        className
      )}
      {...props}
    >
      {children}
    </p>
  )
}

export function PS({ className, children, ...props }) {
  return (
    <p
      className={clsx(
        'text-base text-gray-700 font-extralight leading-snug',
        className
      )}
      {...props}
    >
      {children}
    </p>
  )
}

export function PXS({ className, children, ...props }) {
  return (
    <p
      className={clsx(
        'text-base/8 text-gray-700 font-extralight leading-snug',
        className
      )}
      {...props}
    >
      {children}
    </p>
  )
}

export function Subheading({ className, children, ...props }) {
  return (
    <h3
      className={clsx(
        'text-lg font-medium text-gray-900',
        className
      )}
      {...props}
    >
      {children}
    </h3>
  )
}