Select Component
   - name: string - Select name attribute (required)
   - options: array - Array of options with value and label keys (required)
   - selected: string - Currently selected value (optional)
   - placeholder: string - Placeholder option text (optional)
   - required: boolean - Whether selection is required (default: false)
   - disabled: boolean - Whether the field is disabled (default: false)
   - class: string - Additional CSS classes (optional)
   - id: string - Select ID attribute (optional, defaults to name)

    ThemedComponent::make("form/select")
	->addAttribute('value') //Add an attribute to the element. This is a string like 'data-foo="bar"' or multiple attributes in a single string like 'data-foo="bar" data-bar="baz"' (optional)
	->addCss('value') //string - Add css styles to the element. This should be '<style> custom-class {...} </style>' (optional)
	->addJavaScript('value') //string - Add a script to the element. This is a string like '<script>console.log('Hello World!')</script>' (optional)
	->canSee('value') //bool - Whether the component should be visible or not (optional)
	->class('value') //string - Additional CSS classes (optional)
	->disabled('value') //boolean - Whether the field is disabled (default: false)
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->name('value') //string - Select name attribute (required)
	->options('value') //array - Array of options with value and label keys (required)
	->placeholder('value') //string - Placeholder option text (optional)
	->required('value') //boolean - Whether selection is required (default: false)
	->selected('value') //string - Currently selected value (optional)
	->render();

echo ThemedComponent::make('form/select')
    ->name('color')
    ->options([
        ['value' => 'red', 'label' => 'Red'],
        ['value' => 'blue', 'label' => 'Blue'],
        ['value' => 'green', 'label' => 'Green']
    ])
    ->placeholder('Choose a color')
    ->render();

echo ThemedComponent::make('form/select')
    ->name('country')
    ->options([
        ['value' => 'us', 'label' => 'United States'],
        ['value' => 'uk', 'label' => 'United Kingdom'],
        ['value' => 'ca', 'label' => 'Canada']
    ])
    ->selected('uk')
    ->render();

// Required select
echo ThemedComponent::make('form/select')
    ->name('required-select')
    ->options([
        ['value' => '1', 'label' => 'Option 1'],
        ['value' => '2', 'label' => 'Option 2']
    ])
    ->required(true)
    ->placeholder('Please select (required)')
    ->render();

// Disabled select
echo ThemedComponent::make('form/select')
    ->name('disabled-select')
    ->options([
        ['value' => '1', 'label' => 'Option 1'],
        ['value' => '2', 'label' => 'Option 2']
    ])
    ->disabled(true)
    ->render();

{# Select Component
   - name: string - Select name attribute (required)
   - options: array - Array of options with value and label keys (required)
   - selected: string - Currently selected value (optional)
   - placeholder: string - Placeholder option text (optional)
   - required: boolean - Whether selection is required (default: false)
   - disabled: boolean - Whether the field is disabled (default: false)
   - class: string - Additional CSS classes (optional)
   - id: string - Select ID attribute (optional, defaults to name)
#}

<select
    name="{{ content.name }}"
    id="{{ content.id|default(content.name) }}"
    {% if content.required %}required{% endif %}
    {% if content.disabled %}disabled{% endif %}
    class="form-select {{ content.class|default('') }}"
>
    {% if content.placeholder %}
        <option value="">{{ content.placeholder }}</option>
    {% endif %}
    {% for option in content.options %}
        <option 
            value="{{ option.value }}"
            {% if content.selected == option.value %}selected{% endif %}
        >{{ option.label }}</option>
    {% endfor %}
</select>