'use client';

/**
 * SearchBar — Styled search input for the TopNav.
 *
 * Features:
 * - Search icon (SVG) on the left
 * - "Search" placeholder text
 * - Visual-only — no search logic implementation
 * - Uses dark theme colors from theme.ts
 *
 * Requirements: 2.3
 */

export interface SearchBarProps {
  className?: string;
}

export default function SearchBar({ className }: SearchBarProps) {
  return (
    <div className={`relative ${className ?? ''}`}>
      {/* Search icon */}
      <svg
        className="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-divisi-text-secondary"
        viewBox="0 0 24 24"
        fill="none"
        stroke="currentColor"
        strokeWidth="2"
        strokeLinecap="round"
        strokeLinejoin="round"
      >
        <circle cx="11" cy="11" r="8" />
        <line x1="21" y1="21" x2="16.65" y2="16.65" />
      </svg>

      {/* Search input */}
      <input
        type="text"
        placeholder="Search"
        aria-label="Search"
        className="
          w-full pl-10 pr-4 py-2
          rounded-lg
          bg-white/5 border border-divisi-border
          text-sm text-divisi-text-primary
          placeholder:text-divisi-text-secondary
          focus:outline-none focus:ring-1 focus:ring-divisi-accent/50 focus:border-divisi-accent/50
          transition-colors duration-150
        "
        readOnly
      />
    </div>
  );
}