---
interface Props {
  placeholder?: string;
  buttonText?: string;
  className?: string;
}

const { 
  placeholder = "搜索...", 
  buttonText = "搜索",
  className = ""
} = Astro.props;
---

<section class={`py-8 bg-white dark:bg-color-dark-bg ${className}`}>
  <div class="container mx-auto px-4 sm:px-6 lg:px-8">
    <div class="max-w-2xl mx-auto">
      <div class="relative">
        <input 
          type="text" 
          placeholder={placeholder}
          class="w-full px-4 py-3 pl-12 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-color-primary-500 focus:border-color-primary-500 shadow-sm dark:bg-color-dark-card dark:border-color-dark-border dark:text-white dark:placeholder-gray-400"
        />
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 absolute left-3 top-3.5 text-gray-400 dark:text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
        </svg>
        <button class="absolute right-3 top-3 px-3 py-1 bg-color-primary-500 text-white rounded-md hover:bg-color-primary-600 transition-colors dark:bg-color-dark-primary-600 dark:text-white dark:hover:bg-color-dark-primary-500">
          {buttonText}
        </button>
      </div>
    </div>
  </div>
</section> 