---
export interface Props {
  name?: string;
  id?: string;
  disabled?: boolean;
  required?: boolean;
  class?: string;
}

const {
  name,
  id,
  disabled = false,
  required = false,
  class: className = "",
  ...rest
} = Astro.props;

const classes = ["select", className].filter(Boolean).join(" ");
---

<select
  class={classes}
  name={name}
  id={id}
  disabled={disabled}
  required={required}
  {...rest}
>
  <slot />
</select>

<style>
  .select {
    width: 100%;
    padding: var(--spacing-3) var(--spacing-4);
    font-size: var(--font-size-base);
    line-height: var(--line-height-normal);
    color: var(--text-primary);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-primary);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
  }

  .select:focus {
    outline: none;
    border-color: var(--primary-600);
    box-shadow: 0 0 0 3px rgba(132, 61, 255, 0.1);
  }
</style>