import { Search } from 'lucide-react';

import { Input } from '@/components/ui/input';

interface TopBarSearchProps {
  readonly value: string;
  readonly onChange: (value: string) => void;
}

export function TopBarSearch({ value, onChange }: TopBarSearchProps) {
  return (
    <div className="hidden md:flex relative">
      <Search size={16} className="absolute left-3 top-1/2 -translate-y-1/2 text-slate-500" />
      <Input
        type="text"
        value={value}
        onChange={(event) => onChange(event.target.value)}
        placeholder="Search modules, strategies, signs..."
        className="pl-9 pr-4 py-2 w-72 bg-slate-800/80 border-slate-700/50 rounded-xl text-sm text-white placeholder-slate-500 focus-visible:ring-violet-500/50 focus-visible:border-violet-500/50"
      />
    </div>
  );
}
