import { RichText } from '../../ContentTypes/RichText/RichText';
import { Block } from '../Block'

type HeadingContentType = { rich_text: any[], is_toggleable:boolean, color:string }

export class Heading_2 extends Block {
    static tagName:string = 'h2'

    toHTML(): string {
        const headingContent:HeadingContentType = this.content as HeadingContentType
        const texts:RichText[] = headingContent.rich_text.map( richTextJson => new RichText(richTextJson) )
        const toggleableTag = headingContent.is_toggleable ? 'toggle' : ''
        const color = headingContent.color
        const classTag = ['notion', color, toggleableTag]
        const textContent = texts.map(item => item.toHTML()).join('')
        return `<${Heading_2.tagName} class="${classTag.join(' ')}">${textContent}</${Heading_2.tagName}>`
    }   
}