"use client";
import React from "react";
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet";
import { Button } from "@/components/ui/button";
import { Menu } from "lucide-react";
import NavSubSheets from "./NavSubSheets";
import { Input } from "@/components/ui/input";
import { SearchIcon } from "lucide-react";

const Nav = () => {
  return (
    <div className="bg-gray-200 ">
      <nav className="container flex justify-between pt-1.5 pb-1.5 sm:mx-auto lg:mx-0">
        <Sheet>
          <SheetTrigger className="hidden lg:flex lg:pl-[17.5vw] flex-col items-center ml-[0.5vw]">
            <Menu />
            Menü
          </SheetTrigger>
          <SheetContent side="left">
            <SheetHeader>
              <SheetTitle>Are you absolutely sure?</SheetTitle>
              <SheetDescription>
                This action cannot be undone. This will permanently delete your
                account and remove your data from our servers.
              </SheetDescription>
            </SheetHeader>

            {NavSubSheets()}
            {/* einfach padding auf 0 setzen und dann sollte die umrandung weg sein udn dann muss ich och den sub elementen dafür ein padding geben.*/}
          </SheetContent>
        </Sheet>
        <div className="relative w-full sm:block md:block lg:hidden xl:hidden 2xl:hidden">
          <Input
            type="text"
            placeholder="Online-Shop durchsuchen..."
            className="rounded-full pl-4 pr-12 w-full bg-white"
          />
          <span className="absolute right-4 top-1/2 transform -translate-y-1/2 text-gray-500">
            <SearchIcon stroke="Red" size={24} />{" "}
            {/* Ersetze mit deinem echten Such-Icon */}
          </span>
        </div>
      </nav>
    </div>
  );
};

export default Nav;