<script lang="ts">
  let {
    label = 'Search the workspace',
    placeholder = 'Search products, mixes, sessions, and pages...',
    className = '',
    onClick
  }: {
    label?: string;
    placeholder?: string;
    className?: string;
    onClick: () => void;
  } = $props();
</script>

<button class={`search-box ${className}`.trim()} type="button" aria-label={label} onclick={onClick}>
  <span class="search-icon"></span>
  <span class="search-placeholder">{placeholder}</span>
  <kbd>/</kbd>
</button>

<style>
  .search-box {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.64rem;
    width: 100%;
    padding: 0.72rem 0.82rem;
    border: 1px solid var(--line);
    border-radius: 0.82rem;
    background: var(--panel-soft);
    text-align: left;
    cursor: pointer;
    transition: border-color 140ms ease, background-color 140ms ease, box-shadow 140ms ease;
  }

  .search-box:hover {
    border-color: color-mix(in srgb, var(--color-brand) 22%, var(--line));
    background: #fff;
  }

  .search-box:focus-visible {
    outline: none;
    border-color: var(--color-brand);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-brand) 16%, transparent);
  }

  .search-placeholder {
    color: #93a098;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .search-icon {
    position: relative;
    display: inline-block;
    width: 0.82rem;
    height: 0.82rem;
    border: 2px solid #98a59d;
    border-radius: 999px;
  }

  .search-icon::after {
    content: '';
    position: absolute;
    right: -0.28rem;
    bottom: -0.18rem;
    width: 0.42rem;
    height: 2px;
    border-radius: 999px;
    background: #98a59d;
    transform: rotate(45deg);
  }

  kbd {
    padding: 0.1rem 0.42rem;
    border: 1px solid var(--line-strong);
    border-radius: 0.42rem;
    color: var(--muted);
    background: #fff;
    font-size: 0.76rem;
  }
</style>
