import { Input } from "@/ui";

import { t } from "i18next";
import { SearchIcon } from "lucide-react";

export const GlobalSearchForm = () => (
  <form className='flex-1 ml-auto'>
    <div className='relative'>
      <SearchIcon className='absolute left-2.5 top-2.5 h-4 w-4 text-muted-foreground' />
      <Input
        type='search'
        placeholder={t("main_menu.search_placeholder")}
        className='pl-8 sm:w-[300px] md:w-[200px] lg:w-[300px] xl:w-[550px] 2xl:w-[750px]'
      />
    </div>
  </form>
);
