import React from 'react'
import { useLocale } from '../locale/index.js'

export const Text = ({
  as: Element = 'p',
  variant = 'default',
  maxWidth = 'full',
  text,
  params,
  children,
  ...props
}) => {
  const { t } = useLocale()
  const content = children ?? (text != null ? t(text, params) : undefined)

  return (
    <>
      <style href={`@ossy/design-system/max-width/${maxWidth}`} precedence='high'>
      {`
        [data-max-width="${maxWidth}"] {
          maxWidth: var(--max-width-${maxWidth})
        }
      `}
      </style>
      <style href="@ossy/design-system/text" precedence='high'>
      {`
        [data-text] {
          display: block;
          box-sizing: border-box;
          color: var(--color);
          font-family: var(--font-family);
          font-size: var(--font-size);
          font-weight: var(--font-weight);
          line-height: var(--line-height);
          letter-spacing: var(--letter-spacing);
          text-shadow: var(--text-shadow);
          margin: 0;
          margin-bottom: var(--margin-bottom);
        }

        [data-text]:last-of-type {
          marginBottom: 0
        }
      `}
      </style>
      <style href={`@ossy/design-system/text/${variant}`} precedence='high'>
      {`
        [data-text-variant="${variant}"] {
          --max-width: var(--text-${variant}-max-width, var(--text-default-max-width, 100%));
          --color: var(--text-${variant}-color, var(--foreground, inherit));
          --font-family: var(--text-${variant}-font-family, var(--text-default-font-family, sans-serif));
          --font-size: var(--text-${variant}-font-size, var(--text-default-font-size, 2rem));
          --font-weight: var(--text-${variant}-font-weight, var(--text-default-font-weight, 400));
          --line-height: var(--text-${variant}-line-height, var(--text-default-line-height, 1.6));
          --margin-bottom: var(--text-${variant}-margin-bottom, var(--text-default-margin-bottom, 0));
          --letter-spacing: var(--text-${variant}-letter-spacing, var(--text-default-letter-spacing));
          --text-shadow: var(--text-${variant}-text-shadow, var(--text-default-text-shadow, none));
        }
      `}
      </style>
      <Element data-text data-text-variant={variant} data-max-width={maxWidth} children={content} {...props} />
    </>
  )
}
