<?php
defined( 'ABSPATH' ) || exit;

class Jalpi_Element_Timeline extends Jalpi_Element {
    public static function type(): string { return 'timeline'; }

    public function render( array $node, Jalpi_Renderer $renderer ): string {
        $id      = sanitize_html_class( $node['id'] ?? '' );
        $content = $node['content'] ?? [];
        $styles  = $node['styles']  ?? [];
        $items   = $content['items'] ?? [];
        $a       = $renderer->get_css_attrs( $node );

        $renderer->add_css( '.jalpi-el.jalpi-' . $id . '{display:block;' . $renderer->styles_to_css( $styles ) . '}' );

        $li_html = '';
        foreach ( (array) $items as $item ) {
            $date  = esc_html( $item['date']  ?? '' );
            $title = esc_html( $item['title'] ?? '' );
            $text  = esc_html( $item['text']  ?? '' );
            $li_html .= '<li class="jalpi-timeline__item">'
                      . '<div class="jalpi-timeline__marker" aria-hidden="true"></div>'
                      . '<div class="jalpi-timeline__content">'
                      .   ( $date  ? '<time class="jalpi-timeline__date">' . $date . '</time>' : '' )
                      .   ( $title ? '<h3 class="jalpi-timeline__title">' . $title . '</h3>' : '' )
                      .   ( $text  ? '<p class="jalpi-timeline__text">' . $text . '</p>' : '' )
                      . '</div>'
                      . '</li>';
        }

        return '<ol class="jalpi-el jalpi-timeline jalpi-' . esc_attr( $id ) . $a['extra_cls'] . '"' . $a['id_attr'] . '>' . $li_html . '</ol>';
    }
}
