"use client";

import {Tooltip, TooltipContent, TooltipTrigger} from "@/components/ui/tooltip";
import {Button} from "@/components/ui/button";
import {Archive, ArchiveX, ArrowLeft, Forward, MoreVertical, Reply, ReplyAll, Trash2} from "lucide-react";
import {Separator} from "@/components/ui/separator";
import {DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger} from "@/components/ui/dropdown-menu";
import {useRouter} from "next/navigation";

export default function SessionHeader() {
    const router = useRouter();

    return (
        <div className="flex items-center p-2">
            <div className="flex items-center gap-2">

                {/* back button */}
                <Tooltip>
                    <TooltipTrigger asChild>
                        <Button variant="ghost" size="icon" onClick={() => router.back()}>
                            <ArrowLeft className="h-4 w-4"/>
                            <span className="sr-only">Navigate Back</span>
                        </Button>
                    </TooltipTrigger>
                    <TooltipContent>Navigate Back</TooltipContent>
                </Tooltip>

                <Separator orientation="vertical" className="mx-2 h-6"/>

                <Tooltip>
                    <TooltipTrigger asChild>
                        <Button variant="ghost" size="icon">
                            <Archive className="h-4 w-4"/>
                            <span className="sr-only">Archive</span>
                        </Button>
                    </TooltipTrigger>
                    <TooltipContent>Archive</TooltipContent>
                </Tooltip>
                <Tooltip>
                    <TooltipTrigger asChild>
                        <Button variant="ghost" size="icon">
                            <ArchiveX className="h-4 w-4"/>
                            <span className="sr-only">Move to junk</span>
                        </Button>
                    </TooltipTrigger>
                    <TooltipContent>Move to junk</TooltipContent>
                </Tooltip>
                <Tooltip>
                    <TooltipTrigger asChild>
                        <Button variant="ghost" size="icon">
                            <Trash2 className="h-4 w-4"/>
                            <span className="sr-only">Move to trash</span>
                        </Button>
                    </TooltipTrigger>
                    <TooltipContent>Move to trash</TooltipContent>
                </Tooltip>

            </div>
            <div className="ml-auto flex items-center gap-2">

                <Tooltip>
                    <TooltipTrigger asChild>
                        <Button variant="ghost" size="icon">
                            <Reply className="h-4 w-4"/>
                            <span className="sr-only">Reply</span>
                        </Button>
                    </TooltipTrigger>
                    <TooltipContent>Reply</TooltipContent>
                </Tooltip>
                <Tooltip>
                    <TooltipTrigger asChild>
                        <Button variant="ghost" size="icon">
                            <ReplyAll className="h-4 w-4"/>
                            <span className="sr-only">Reply all</span>
                        </Button>
                    </TooltipTrigger>
                    <TooltipContent>Reply all</TooltipContent>
                </Tooltip>
                <Tooltip>
                    <TooltipTrigger asChild>
                        <Button variant="ghost" size="icon">
                            <Forward className="h-4 w-4"/>
                            <span className="sr-only">Forward</span>
                        </Button>
                    </TooltipTrigger>
                    <TooltipContent>Forward</TooltipContent>
                </Tooltip>
            </div>
            <Separator orientation="vertical" className="mx-2 h-6"/>
            <DropdownMenu>
                <DropdownMenuTrigger asChild>
                    <Button variant="ghost" size="icon">
                        <MoreVertical className="h-4 w-4"/>
                        <span className="sr-only">More</span>
                    </Button>
                </DropdownMenuTrigger>
                <DropdownMenuContent align="end">
                    <DropdownMenuItem>Mark as unread</DropdownMenuItem>
                    <DropdownMenuItem>Star thread</DropdownMenuItem>
                    <DropdownMenuItem>Add label</DropdownMenuItem>
                </DropdownMenuContent>
            </DropdownMenu>
        </div>
    )
}