import { Search } from 'lucide-react';

export const BlogSearchInput = () => {
  return (
    <div className="relative group">
      <div className="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none">
        <Search className="w-4 h-4 text-gray-500 group-focus-within:text-violet-500 transition-colors" />
      </div>
      <input
        type="text"
        placeholder="Search articles..."
        className="block w-full rounded-xl border border-white/10 bg-[#161b28] py-3 pl-10 pr-4 text-white placeholder:text-gray-500 focus:border-violet-500 focus:ring-1 focus:ring-violet-500 sm:text-sm shadow-sm transition-all focus:outline-none"
      />
    </div>
  );
};
