import { Search } from 'lucide-react'
import styles from './TopBar.module.css'

interface SearchTriggerProps {
  onClick: () => void
  className?: string
}

export function SearchTrigger({ onClick, className }: SearchTriggerProps) {
  return (
    <button
      className={`${styles.search} ${className ?? ''}`}
      onClick={onClick}
      type="button"
      aria-label="Open search"
    >
      <span className={styles.searchIcon} aria-hidden="true">
        <Search size={13} />
      </span>
      <span className={styles.searchPlaceholder}>Search... &#8984;K</span>
      <span className={styles.kbd}>Ctrl+K</span>
    </button>
  )
}
