import { ReactNode } from 'react'
import { clsx } from 'clsx'

interface TextProps {
  children: ReactNode
  className?: string
  href?: string
  type?: 'p' | 'span'
}

export const Text: React.FC<TextProps> = ({
  children,
  className = '',
  type = 'p',
}) => {
  const Component = type === 'p' ? 'p' : 'span'

  return (
    <Component className={`text-gray-600 ${className}`}>{children}</Component>
  )
}

export const BoldText: React.FC<TextProps> = ({ children, className = '' }) => (
  <p className={`mt-5 pb-2 text-lg font-bold text-gray-600 ${className}`}>
    {children}
  </p>
)

export const BaseBoldText: React.FC<TextProps> = ({
  children,
  className = '',
}) => (
  <p className={`mt-5 pb-2 font-bold text-gray-600 ${className}`}>{children}</p>
)

export const Anchor: React.FC<TextProps> = ({
  children,
  className = '',
  href = '',
}) => (
  <a
    className={`text-gray-600 hover:underline ${className} break-all`}
    href={href}
    target="_blank"
  >
    {children}
  </a>
)

export const List: React.FC<TextProps> = ({ children, className = '' }) => (
  <ul className={`ml-4 list-outside list-disc ${className}`}>{children}</ul>
)

export const ListItem: React.FC<TextProps> = ({ children, className = '' }) => (
  <li className={`text-gray-600 ${className}`}>{children}</li>
)

type HeadingProps = {
  as?: 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
  dark?: boolean
} & React.ComponentPropsWithoutRef<
  'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
>

export function Heading({
  className,
  as: Element = 'h2',
  dark = false,
  ...props
}: HeadingProps) {
  return (
    <Element
      {...props}
      data-dark={dark ? 'true' : undefined}
      className={clsx(
        className,
        'text-pretty text-4xl font-medium tracking-tighter text-gray-950 data-[dark]:text-white sm:text-6xl',
      )}
    />
  )
}

export function Subheading({
  className,
  as: Element = 'h2',
  dark = false,
  ...props
}: HeadingProps) {
  return (
    <Element
      {...props}
      data-dark={dark ? 'true' : undefined}
      className={clsx(
        className,
        'font-mono text-xs/5 font-semibold uppercase tracking-widest text-gray-500 data-[dark]:text-gray-400',
      )}
    />
  )
}
