import {Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, SheetTrigger} from "@/components/ui/sheet";
import {Button} from "@/components/ui/button";
import {Home, LineChart, Package, PanelLeft, ShoppingCart, Users2} from "lucide-react";
import Link from "next/link";
import * as VisuallyHidden from '@radix-ui/react-visually-hidden';

export default function AdminSheet() {
    return (
        <Sheet>
            <SheetTrigger asChild id={"sheet-trigger"}>
                <Button size="icon" variant="outline" className="sm:hidden">
                    <PanelLeft className="h-5 w-5"/>
                    <span className="sr-only">Toggle Menu</span>
                </Button>
            </SheetTrigger>

            <SheetContent side="left" className="sm:max-w-xs">

                <SheetHeader>
                    <SheetTitle>
                        <VisuallyHidden.Root>
                            menu
                        </VisuallyHidden.Root>
                    </SheetTitle>
                    <SheetDescription>
                        <VisuallyHidden.Root>
                            admin main panel
                        </VisuallyHidden.Root>
                    </SheetDescription>
                </SheetHeader>


                <nav className="grid gap-6 text-lg font-medium">
                    <Link
                        href="#"
                        className="group flex h-10 w-10 shrink-0 items-center justify-center gap-2 rounded-full bg-primary text-lg font-semibold text-primary-foreground md:text-base"
                    >
                        <Home className="h-5 w-5 transition-all group-hover:scale-110"/>
                        <span className="sr-only">TheraChat</span>
                    </Link>
                    <Link
                        href="#"
                        className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
                    >
                        <Home className="h-5 w-5"/>
                        Dashboard
                    </Link>
                    <Link
                        href="#"
                        className="flex items-center gap-4 px-2.5 text-foreground"
                    >
                        <ShoppingCart className="h-5 w-5"/>
                        Orders
                    </Link>
                    <Link
                        href="#"
                        className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
                    >
                        <Package className="h-5 w-5"/>
                        Products
                    </Link>
                    <Link
                        href="#"
                        className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
                    >
                        <Users2 className="h-5 w-5"/>
                        Customers
                    </Link>
                    <Link
                        href="#"
                        className="flex items-center gap-4 px-2.5 text-muted-foreground hover:text-foreground"
                    >
                        <LineChart className="h-5 w-5"/>
                        Settings
                    </Link>
                </nav>
            </SheetContent>
        </Sheet>
    )
}