<?php

namespace App\Http\Livewire;

use Livewire\Component;

class LiveBuilderStyler extends Component
{
    // Reactive property to store the styles for the current section.
    public $styles;

    // Use the `updated` lifecycle hook to generate the styles CSS when the styles change.
    public function updated($field)
    {
        if ($field === 'styles') {
            $this->generateStylesCss();
        }
    }

    // Generate the styles CSS and store it in a reactive property.
    public function generateStylesCss()
    {
        $css = '';

        foreach ($this->styles as $key => $value) {
            $css .= "{$key}: {$value};";
        }

        $this->stylesCss = $css;
    }

    public function render()
    {
        return view('livewire.livebuilder-styler');
    }
}