import {
  Button,
  Label,
  SidebarGroup,
  SidebarGroupContent,
  SidebarInput,
  SidebarMenu,
  SidebarMenuItem,
} from "@repo/shadcn-ui/components";
import { BinocularsIcon, SearchIcon } from "lucide-react";

export function SearchForm({ ...props }: React.ComponentProps<"form">) {
  return (
    <form {...props}>
      <SidebarGroup className='py-0'>
        <SidebarGroupContent className='relative'>
          <SidebarMenu>
            <SidebarMenuItem className='flex items-center gap-2'>
              <Label htmlFor='search' className='sr-only'>
                Search
              </Label>
              <SidebarInput id='search' placeholder='Search...' className='pl-8 h-9' />
              <SearchIcon className='pointer-events-none absolute top-1/2 left-2 size-4 -translate-y-1/2 opacity-50 select-none ' />
              <Button
                size='icon'
                className='h-9 w-9 shrink-0 group-data-[collapsible=icon]:opacity-0'
                variant='outline'
              >
                <BinocularsIcon />
                <span className='sr-only'>Advanced search</span>
              </Button>
            </SidebarMenuItem>
          </SidebarMenu>
        </SidebarGroupContent>
      </SidebarGroup>
    </form>
  );
}