"use client";

/**
 * Props interface for the SearchBar component
 * @property onSearch - Callback function triggered when search input changes
 */
interface SearchBarProps {
  onSearch: (query: string) => void;
}

/**
 * SearchBar component that provides a styled search input with an icon
 * Features:
 * - Real-time search with onChange event
 * - Glassmorphic design with backdrop blur
 * - Responsive width with max-width constraint
 * - Animated focus state with primary color ring
 */
export default function SearchBar({ onSearch }: SearchBarProps) {
  return (
    <div className="relative max-w-full mx-auto">
      {/* Search input field with glassmorphic styling */}
      <input
        type="text"
        placeholder="搜尋 PlayGO AI..."
        onChange={(e) => onSearch(e.target.value)}
        className="w-full rounded-2xl border border-border/50 bg-background-primary/50 px-4 py-6 pl-12 pr-36
                 backdrop-blur-sm shadow-lg focus:outline-none focus:ring-2 focus:ring-primary/50
                 text-lg transition-all duration-200 placeholder:text-text-secondary/50"
      />
      {/* Search icon positioned absolutely within the input */}
      <svg
        className="absolute left-4 top-1/2 h-6 w-6 -translate-y-1/2 text-text-secondary/50"
        fill="none"
        stroke="currentColor"
        viewBox="0 0 24 24"
      >
        <path
          strokeLinecap="round"
          strokeLinejoin="round"
          strokeWidth={2}
          d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
        />
      </svg>
    </div>
  );
}