import { Component, input } from '@angular/core';
import { TypographyVariants } from '../../types/TypographyVariants';
import { NgTemplateOutlet } from '@angular/common';

@Component({
  selector: 'mw-typography',
  standalone: true,
  imports: [NgTemplateOutlet],
  templateUrl: './typography.component.html',
  styleUrl: './typography.component.css'
})
export class TypographyComponent {
  /**
   * @description Color for text as a string
   */
  color = input("var(--mw-black, #000000)");

  /**
   * @description If true, turns overflowing text into ellipsis (...) when the maxWidth attr is set
   */
  ellipsis = input(false);
  
  /**
   * @description Sets the font family
   */
  font = input('robotoregular');

  /**
   * @description Sets the font weight
   */
  weight = input('400');

  /**
   * @description sets the horizontal spacing behavior between text characters
   */
  letterSpacing = input("normal");
  
  /**
   * @description Sets the height of a line box in horizontal writing modes
   */
  lineHeight = input(null, {transform:(v) => v === null ? this.size() : v})

  /**
   * @description Maximum width that the text might take (null if no max width)
   */
  maxWidth = input<string|null>(null)
  
  /**
   * @description Font size with it's units
   */
  size = input("1.4rem");
  
  /**
   * @description HTMLElement p,h1,h2,h3,h4,h5 
   */
  variant = input(TypographyVariants.p);
  protected variantTypes = TypographyVariants;

}


