<?php
/**
 * Widget Name: Advanced Separator
 * Description: A highly customisable separator – 2026 edition.
 *              Supports solid, double, dashed, dotted, groove, ridge,
 *              gradient, shadow, glow, zigzag, wave, ornamental, text,
 *              icon and image styles. Includes entrance animations,
 *              vertical mode, typography controls and SEO-friendly markup.
 *
 * @package    captain-widgets-kit
 * @subpackage captain-widgets-kit/includes
 * @since      1.1.0
 */

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

use Elementor\Widget_Base;
use Elementor\Controls_Manager;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Icons_Manager;
use Elementor\Utils;

/**
 * Class Captwiki_Separator
 *
 * @since 1.1.0
 */
class Captwiki_Separator extends Widget_Base {

	/**
	 * Get widget name.
	 *
	 * @since 1.1.0
	 *
	 * @return string
	 */
	public function get_name(): string {
		return 'captwiki-separator';
	}

	/**
	 * Get widget title.
	 *
	 * @since 1.1.0
	 *
	 * @return string
	 */
	public function get_title(): string {
		return esc_html__( 'Advanced Separator', 'captain-widgets-kit' );
	}

	/**
	 * Get widget icon.
	 *
	 * @since 1.1.0
	 *
	 * @return string
	 */
	public function get_icon(): string {
		return 'eicon-divider captwiki-el-logo';
	}

	/**
	 * Get widget categories.
	 *
	 * @since 1.1.0
	 *
	 * @return array
	 */
	public function get_categories(): array {
		return array( 'captwiki-essential' );
	}

	/**
	 * Get widget keywords.
	 *
	 * @since 1.1.0
	 *
	 * @return array
	 */
	public function get_keywords(): array {
		return array( 'separator', 'divider', 'line', 'hr', 'section', 'break' );
	}

	/**
	 * Enqueue widget stylesheet.
	 *
	 * @since 1.1.0
	 *
	 * @return array
	 */
	public function get_style_depends(): array {
		return array( 'captwiki-separator' );
	}

	/**
	 * Optimised markup – skip inner wrapper when possible.
	 *
	 * @since 1.1.0
	 *
	 * @return bool
	 */
	public function has_widget_inner_wrapper(): bool {
		return ! \Elementor\Plugin::$instance->experiments->is_feature_active( 'e_optimized_markup' );
	}

	/**
	 * Register controls.
	 *
	 * @since 1.1.0
	 */
	protected function register_controls(): void {

		$this->start_controls_section(
			'section_separator',
			array(
				'label' => esc_html__( 'Separator', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'separator_style',
			array(
				'label'   => esc_html__( 'Style', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'solid',
				'options' => array(
					'solid'      => esc_html__( 'Solid', 'captain-widgets-kit' ),
					'double'     => esc_html__( 'Double', 'captain-widgets-kit' ),
					'dashed'     => esc_html__( 'Dashed', 'captain-widgets-kit' ),
					'dotted'     => esc_html__( 'Dotted', 'captain-widgets-kit' ),
					'groove'     => esc_html__( 'Groove (3-D)', 'captain-widgets-kit' ),
					'ridge'      => esc_html__( 'Ridge (3-D)', 'captain-widgets-kit' ),
					'gradient'   => esc_html__( 'Gradient', 'captain-widgets-kit' ),
					'shadow'     => esc_html__( 'Shadow', 'captain-widgets-kit' ),
					'glow'       => esc_html__( 'Glow', 'captain-widgets-kit' ),
					/* SVG styles */
					'zigzag'     => esc_html__( 'Zigzag', 'captain-widgets-kit' ),
					'wave'       => esc_html__( 'Wave', 'captain-widgets-kit' ),
					/* Decorated styles */
					'text'       => esc_html__( 'With Text', 'captain-widgets-kit' ),
					'icon'       => esc_html__( 'With Icon', 'captain-widgets-kit' ),
					'image'      => esc_html__( 'With Image', 'captain-widgets-kit' ),
					'ornamental' => esc_html__( 'Ornamental', 'captain-widgets-kit' ),
				),
			)
		);

		/* Direction */
		$this->add_control(
			'separator_direction',
			array(
				'label'     => esc_html__( 'Direction', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::CHOOSE,
				'options'   => array(
					'horizontal' => array(
						'title' => esc_html__( 'Horizontal', 'captain-widgets-kit' ),
						'icon'  => 'eicon-arrow-right',
					),
					'vertical'   => array(
						'title' => esc_html__( 'Vertical', 'captain-widgets-kit' ),
						'icon'  => 'eicon-arrow-down',
					),
				),
				'default'   => 'horizontal',
				'condition' => array(
					'separator_style!' => array( 'zigzag', 'wave', 'text', 'icon', 'image', 'ornamental' ),
				),
			)
		);

		/* Alignment */
		$this->add_control(
			'alignment',
			array(
				'label'   => esc_html__( 'Alignment', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::CHOOSE,
				'options' => array(
					'left'   => array(
						'title' => esc_html__( 'Left', 'captain-widgets-kit' ),
						'icon'  => 'eicon-text-align-left',
					),
					'center' => array(
						'title' => esc_html__( 'Center', 'captain-widgets-kit' ),
						'icon'  => 'eicon-text-align-center',
					),
					'right'  => array(
						'title' => esc_html__( 'Right', 'captain-widgets-kit' ),
						'icon'  => 'eicon-text-align-right',
					),
				),
				'default' => 'center',
			)
		);

		/* ── Text Controls ──────────────────────────────────────── */
		$this->add_control(
			'separator_text',
			array(
				'label'     => esc_html__( 'Text', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::TEXT,
				'default'   => esc_html__( 'Section', 'captain-widgets-kit' ),
				'dynamic'   => array( 'active' => true ),
				'condition' => array( 'separator_style' => array( 'text', 'ornamental' ) ),
			)
		);

		/* HTML tag for text (SEO) */
		$this->add_control(
			'text_html_tag',
			array(
				'label'     => esc_html__( 'HTML Tag', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::SELECT,
				'default'   => 'span',
				'options'   => array(
					'h1'   => 'H1',
					'h2'   => 'H2',
					'h3'   => 'H3',
					'h4'   => 'H4',
					'h5'   => 'H5',
					'h6'   => 'H6',
					'p'    => 'p',
					'span' => 'span',
				),
				'condition' => array( 'separator_style' => array( 'text', 'ornamental' ) ),
			)
		);

		/* ── Icon Controls ──────────────────────────────────────── */
		$this->add_control(
			'separator_icon',
			array(
				'label'     => esc_html__( 'Icon', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::ICONS,
				'default'   => array(
					'value'   => 'fas fa-star',
					'library' => 'fa-solid',
				),
				'condition' => array( 'separator_style' => 'icon' ),
			)
		);

		$this->add_control(
			'icon_size',
			array(
				'label'      => esc_html__( 'Icon Size', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', 'em', 'rem' ),
				'range'      => array(
					'px' => array(
						'min' => 10,
						'max' => 120,
					),
				),
				'default'    => array(
					'size' => 24,
					'unit' => 'px',
				),
				'selectors'  => array(
					'{{WRAPPER}} .cwk-separator__icon-wrap' => 'font-size: {{SIZE}}{{UNIT}}; width: {{SIZE}}{{UNIT}}; height: {{SIZE}}{{UNIT}};',
				),
				'condition'  => array( 'separator_style' => 'icon' ),
			)
		);

		/* ── Image Controls ─────────────────────────────────────── */
		$this->add_control(
			'separator_image',
			array(
				'label'     => esc_html__( 'Image', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::MEDIA,
				'default'   => array( 'url' => Utils::get_placeholder_image_src() ),
				'dynamic'   => array( 'active' => true ),
				'condition' => array( 'separator_style' => 'image' ),
			)
		);

		$this->add_control(
			'image_width',
			array(
				'label'      => esc_html__( 'Image Width', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( 'px', '%' ),
				'range'      => array(
					'px' => array(
						'min' => 10,
						'max' => 400,
					),
				),
				'default'    => array(
					'size' => 60,
					'unit' => 'px',
				),
				'selectors'  => array(
					'{{WRAPPER}} .cwk-separator__image' => 'width: {{SIZE}}{{UNIT}};',
				),
				'condition'  => array( 'separator_style' => 'image' ),
			)
		);

		$this->add_control(
			'image_border_radius',
			array(
				'label'      => esc_html__( 'Border Radius', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .cwk-separator__image' => 'border-radius: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
				'condition'  => array( 'separator_style' => 'image' ),
			)
		);

		$this->end_controls_section();

		/* ── SECTION: Line Style ─────────────────────────────────── */
		$this->start_controls_section(
			'section_line_style',
			array(
				'label'     => esc_html__( 'Line Style', 'captain-widgets-kit' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'separator_style!' => array( 'zigzag', 'wave', 'image' ),
				),
			)
		);

		$this->add_control(
			'separator_color',
			array(
				'label'     => esc_html__( 'Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .cwk-separator__line' => 'border-color: {{VALUE}}; background-color: {{VALUE}}; --cwk-sep-color: {{VALUE}};',
					'{{WRAPPER}} .cwk-separator__text-line' => 'border-color: {{VALUE}};',
					'{{WRAPPER}} .cwk-separator__icon-wrap' => 'color: {{VALUE}};',
					'{{WRAPPER}} .cwk-separator__text-label' => 'color: {{VALUE}};',
					'{{WRAPPER}} .cwk-separator__svg-wrap svg' => 'fill: {{VALUE}}; stroke: {{VALUE}};',
					'{{WRAPPER}} .cwk-separator--ornamental .cwk-separator__text-line' => 'color: {{VALUE}};',
				),
				'condition' => array( 'separator_style!' => 'gradient' ),
			)
		);

		/* Gradient background for gradient style */
		$this->add_group_control(
			Group_Control_Background::get_type(),
			array(
				'name'      => 'gradient_background',
				'label'     => esc_html__( 'Gradient', 'captain-widgets-kit' ),
				'types'     => array( 'gradient' ),
				'selector'  => '{{WRAPPER}} .cwk-separator__line--gradient',
				'condition' => array( 'separator_style' => 'gradient' ),
			)
		);

		$this->add_responsive_control(
			'separator_width',
			array(
				'label'      => esc_html__( 'Width', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::SLIDER,
				'size_units' => array( '%', 'px', 'vw' ),
				'range'      => array(
					'%'  => array(
						'min' => 5,
						'max' => 100,
					),
					'px' => array(
						'min' => 20,
						'max' => 2000,
					),
					'vw' => array(
						'min' => 5,
						'max' => 100,
					),
				),
				'default'    => array(
					'unit' => '%',
					'size' => 100,
				),
				'selectors'  => array(
					'{{WRAPPER}} .cwk-separator__line,
					 {{WRAPPER}} .cwk-separator__text-inner,
					 {{WRAPPER}} .cwk-separator__svg-wrap' => 'width: {{SIZE}}{{UNIT}};',
				),
			)
		);

		$this->add_responsive_control(
			'separator_thickness',
			array(
				'label'     => esc_html__( 'Thickness', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 1,
						'max' => 100,
					),
				),
				'default'   => array( 'size' => 10 ),
				'selectors' => array(
					'{{WRAPPER}} .cwk-separator__line' => 'border-top-width: {{SIZE}}px;',
					'{{WRAPPER}} .cwk-separator__line--gradient,
					 {{WRAPPER}} .cwk-separator__line--shadow,
					 {{WRAPPER}} .cwk-separator__line--glow' => 'height: {{SIZE}}px;',
					'{{WRAPPER}} .cwk-separator__text-line' => 'border-top-width: {{SIZE}}px;',
					'{{WRAPPER}} .cwk-separator--vertical .cwk-separator__line' => 'border-left-width: {{SIZE}}px;',
				),
				'condition' => array( 'separator_style!' => array( 'zigzag', 'wave' ) ),
			)
		);

		/* SVG height for zigzag / wave */
		$this->add_responsive_control(
			'svg_height',
			array(
				'label'     => esc_html__( 'Height', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 10,
						'max' => 100,
					),
				),
				'default'   => array( 'size' => 20 ),
				'selectors' => array(
					'{{WRAPPER}} .cwk-separator__svg-wrap svg' => 'height: {{SIZE}}px;',
				),
				'condition' => array( 'separator_style' => array( 'zigzag', 'wave' ) ),
			)
		);

		$this->add_group_control(
			Group_Control_Box_Shadow::get_type(),
			array(
				'name'     => 'line_box_shadow',
				'label'    => esc_html__( 'Box Shadow', 'captain-widgets-kit' ),
				'selector' => '{{WRAPPER}} .cwk-separator__line',
			)
		);

		$this->end_controls_section();

		/* ── SECTION: Text / Icon Style ─────────────────────────── */
		$this->start_controls_section(
			'section_text_style',
			array(
				'label'     => esc_html__( 'Text / Icon Style', 'captain-widgets-kit' ),
				'tab'       => Controls_Manager::TAB_STYLE,
				'condition' => array(
					'separator_style' => array( 'text', 'icon', 'ornamental' ),
				),
			)
		);

		$this->add_group_control(
			Group_Control_Typography::get_type(),
			array(
				'name'      => 'text_typography',
				'selector'  => '{{WRAPPER}} .cwk-separator__text-label',
				'condition' => array( 'separator_style' => array( 'text', 'ornamental' ) ),
			)
		);

		$this->add_control(
			'text_color',
			array(
				'label'     => esc_html__( 'Text Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .cwk-separator__text-label' => 'color: {{VALUE}};',
				),
				'condition' => array( 'separator_style' => array( 'text', 'ornamental' ) ),
			)
		);

		$this->add_control(
			'text_background_color',
			array(
				'label'     => esc_html__( 'Text Background', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'default'   => '#ffffff',
				'selectors' => array(
					'{{WRAPPER}} .cwk-separator__text-label' => 'background-color: {{VALUE}};',
				),
				'condition' => array( 'separator_style' => 'text' ),
			)
		);

		$this->add_responsive_control(
			'text_padding',
			array(
				'label'      => esc_html__( 'Text Padding', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', 'em', '%' ),
				'selectors'  => array(
					'{{WRAPPER}} .cwk-separator__text-label' => 'padding: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
				'condition'  => array( 'separator_style' => array( 'text', 'ornamental' ) ),
			)
		);

		$this->add_responsive_control(
			'icon_color',
			array(
				'label'     => esc_html__( 'Icon Color', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::COLOR,
				'selectors' => array(
					'{{WRAPPER}} .cwk-separator__icon-wrap' => 'color: {{VALUE}};',
				),
				'condition' => array( 'separator_style' => 'icon' ),
			)
		);

		$this->add_control(
			'gap',
			array(
				'label'     => esc_html__( 'Gap (Icon / Text to Line)', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min' => 0,
						'max' => 60,
					),
				),
				'default'   => array( 'size' => 12 ),
				'selectors' => array(
					'{{WRAPPER}} .cwk-separator__text-inner' => 'gap: {{SIZE}}px;',
				),
				'condition' => array( 'separator_style' => array( 'text', 'icon', 'ornamental' ) ),
			)
		);

		$this->end_controls_section();

		/* ── SECTION: Animation ──────────────────────────────────── */
		$this->start_controls_section(
			'section_animation',
			array(
				'label' => esc_html__( 'Animation', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_CONTENT,
			)
		);

		$this->add_control(
			'entrance_animation',
			array(
				'label'   => esc_html__( 'Entrance Animation', 'captain-widgets-kit' ),
				'type'    => Controls_Manager::SELECT,
				'default' => 'none',
				'options' => array(
					'none'        => esc_html__( 'None', 'captain-widgets-kit' ),
					'fadein'      => esc_html__( 'Fade In', 'captain-widgets-kit' ),
					'expand'      => esc_html__( 'Expand', 'captain-widgets-kit' ),
					'slide-left'  => esc_html__( 'Slide from Left', 'captain-widgets-kit' ),
					'slide-right' => esc_html__( 'Slide from Right', 'captain-widgets-kit' ),
					'bounce'      => esc_html__( 'Bounce', 'captain-widgets-kit' ),
					'pulse'       => esc_html__( 'Pulse (Loop)', 'captain-widgets-kit' ),
				),
			)
		);

		$this->add_control(
			'animation_duration',
			array(
				'label'     => esc_html__( 'Duration (ms)', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 200,
						'max'  => 3000,
						'step' => 100,
					),
				),
				'default'   => array( 'size' => 600 ),
				'selectors' => array(
					'{{WRAPPER}} .cwk-separator' => 'animation-duration: {{SIZE}}ms;',
				),
				'condition' => array( 'entrance_animation!' => 'none' ),
			)
		);

		$this->add_control(
			'animation_delay',
			array(
				'label'     => esc_html__( 'Delay (ms)', 'captain-widgets-kit' ),
				'type'      => Controls_Manager::SLIDER,
				'range'     => array(
					'px' => array(
						'min'  => 0,
						'max'  => 3000,
						'step' => 100,
					),
				),
				'default'   => array( 'size' => 0 ),
				'selectors' => array(
					'{{WRAPPER}} .cwk-separator' => 'animation-delay: {{SIZE}}ms;',
				),
				'condition' => array( 'entrance_animation!' => 'none' ),
			)
		);

		$this->end_controls_section();

		/* ── SECTION: Spacing ────────────────────────────────────── */
		$this->start_controls_section(
			'section_spacing',
			array(
				'label' => esc_html__( 'Spacing', 'captain-widgets-kit' ),
				'tab'   => Controls_Manager::TAB_STYLE,
			)
		);

		$this->add_responsive_control(
			'separator_margin',
			array(
				'label'      => esc_html__( 'Margin', 'captain-widgets-kit' ),
				'type'       => Controls_Manager::DIMENSIONS,
				'size_units' => array( 'px', '%', 'em', 'rem' ),
				'selectors'  => array(
					'{{WRAPPER}} .cwk-separator' => 'margin: {{TOP}}{{UNIT}} {{RIGHT}}{{UNIT}} {{BOTTOM}}{{UNIT}} {{LEFT}}{{UNIT}};',
				),
			)
		);

		$this->end_controls_section();
	}

	/**
	 * Render separator widget output.
	 *
	 * @since 1.1.0
	 */
	protected function render(): void {
		$settings  = $this->get_settings_for_display();
		$style     = isset( $settings['separator_style'] ) ? $settings['separator_style'] : 'solid';
		$alignment = isset( $settings['alignment'] ) ? $settings['alignment'] : 'center';
		$direction = isset( $settings['separator_direction'] ) ? $settings['separator_direction'] : 'horizontal';
		$animation = isset( $settings['entrance_animation'] ) ? $settings['entrance_animation'] : 'none';

		$wrapper_classes = array(
			'cwk-separator',
			"cwk-separator--align-{$alignment}",
		);

		if ( 'vertical' === $direction && ! in_array( $style, array( 'zigzag', 'wave', 'text', 'icon', 'image', 'ornamental' ), true ) ) {
			$wrapper_classes[] = 'cwk-separator--vertical';
		}

		if ( in_array( $style, array( 'text', 'icon', 'image', 'ornamental' ), true ) ) {
			$wrapper_classes[] = "cwk-separator--{$style}";
		}

		if ( 'none' !== $animation ) {
			$wrapper_classes[] = "cwk-separator--anim-{$animation}";
		}

		$aria_attrs = 'role="separator" aria-hidden="true"';

		echo '<div class="' . esc_attr( implode( ' ', $wrapper_classes ) ) . '" ' . $aria_attrs . '>';

		switch ( $style ) {

			case 'solid':
			case 'double':
			case 'dashed':
			case 'dotted':
			case 'groove':
			case 'ridge':
				echo '<hr class="cwk-separator__line cwk-separator__line--' . esc_attr( $style ) . '" />';
				break;

			case 'gradient':
				echo '<div class="cwk-separator__line cwk-separator__line--gradient"></div>';
				break;

			case 'shadow':
				echo '<div class="cwk-separator__line cwk-separator__line--shadow"></div>';
				break;

			case 'glow':
				echo '<div class="cwk-separator__line cwk-separator__line--glow"></div>';
				break;

			case 'zigzag':
				echo '<div class="cwk-separator__svg-wrap" aria-hidden="true">';
				echo '<svg viewBox="0 0 100 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">';
				echo '<polyline points="0,10 5,0 10,10 15,0 20,10 25,0 30,10 35,0 40,10 45,0 50,10 55,0 60,10 65,0 70,10 75,0 80,10 85,0 90,10 95,0 100,10" fill="none" stroke-width="1.5" />';
				echo '</svg>';
				echo '</div>';
				break;

			case 'wave':
				echo '<div class="cwk-separator__svg-wrap" aria-hidden="true">';
				echo '<svg viewBox="0 0 100 10" preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg">';
				echo '<path d="M0,5 C10,0 20,10 30,5 C40,0 50,10 60,5 C70,0 80,10 90,5 C95,2 97,4 100,5" fill="none" stroke-width="1.5" />';
				echo '</svg>';
				echo '</div>';
				break;

			case 'text':
			case 'ornamental':
				$text    = isset( $settings['separator_text'] ) ? $settings['separator_text'] : '';
				$tag     = isset( $settings['text_html_tag'] ) ? $settings['text_html_tag'] : 'span';
				$allowed = array( 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'span' );
				$tag     = in_array( $tag, $allowed, true ) ? $tag : 'span';

				echo '<div class="cwk-separator__text-inner">';
				echo '<span class="cwk-separator__text-line"></span>';
				echo '<' . esc_attr( $tag ) . ' class="cwk-separator__text-label">';
				echo esc_html( $text );
				echo '</' . esc_attr( $tag ) . '>';
				echo '<span class="cwk-separator__text-line"></span>';
				echo '</div>';
				break;

			case 'icon':
				echo '<div class="cwk-separator__text-inner">';
				echo '<span class="cwk-separator__text-line"></span>';
				echo '<span class="cwk-separator__icon-wrap">';
				Icons_Manager::render_icon( $settings['separator_icon'], array( 'aria-hidden' => 'true' ) );
				echo '</span>';
				echo '<span class="cwk-separator__text-line"></span>';
				echo '</div>';
				break;

			case 'image':
				$image_url = isset( $settings['separator_image']['url'] ) ? $settings['separator_image']['url'] : '';
				$image_id  = isset( $settings['separator_image']['id'] ) ? $settings['separator_image']['id'] : '';

				echo '<div class="cwk-separator__text-inner">';
				echo '<span class="cwk-separator__text-line"></span>';

				if ( $image_id ) {
					echo wp_get_attachment_image(
						(int) $image_id,
						'medium',
						false,
						array(
							'class'    => 'cwk-separator__image',
							'loading'  => 'lazy',
							'decoding' => 'async',
						)
					);
				} elseif ( $image_url ) {
					echo '<img class="cwk-separator__image" src="' . esc_url( $image_url ) . '" alt="" loading="lazy" decoding="async" />';
				}

				echo '<span class="cwk-separator__text-line"></span>';
				echo '</div>';
				break;
		}

		echo '</div><!-- .cwk-separator -->';
	}
}
