import Link from "next/link";
import {
  MessageSquare,
  Phone,
  Settings,
  ShieldCheck,
} from 'lucide-react';
import { cn } from '@/lib/utils';
import { Button } from '@/components/ui/button';
import {
  Tooltip,
  TooltipContent,
  TooltipProvider,
  TooltipTrigger,
} from '@/components/ui/tooltip';
import { UserData } from "@/lib/types";
import { UserNav } from "./user-nav";

interface SidebarProps {
  isCollapsed: boolean;
  loggedInUser: UserData;
}

export function Sidebar({ isCollapsed, loggedInUser }: SidebarProps) {
  return (
    <div
      data-collapsed={isCollapsed}
      className="relative flex h-full w-16 flex-col justify-between border-r bg-card p-2"
    >
      <TooltipProvider delayDuration={0}>
        <div className="flex flex-col items-center gap-2">
            <div className="p-2">
                <ShieldCheck className="h-8 w-8 text-primary" />
            </div>
            <nav className="grid gap-2 place-content-center">
                <Tooltip>
                <TooltipTrigger asChild>
                    <Link href="/">
                    <Button
                        variant="ghost"
                        size="icon"
                        className="rounded-lg bg-muted"
                        aria-label="Chats"
                    >
                        <MessageSquare className="size-5" />
                    </Button>
                    </Link>
                </TooltipTrigger>
                <TooltipContent side="right" sideOffset={5}>
                    Chats
                </TooltipContent>
                </Tooltip>
                {/* <Tooltip>
                <TooltipTrigger asChild>
                    <Link href="/calls">
                    <Button
                        variant="ghost"
                        size="icon"
                        className="rounded-lg"
                        aria-label="Calls"
                    >
                        <Phone className="size-5" />
                    </Button>
                    </Link>
                </TooltipTrigger>
                <TooltipContent side="right" sideOffset={5}>
                    Calls
                </TooltipContent>
                </Tooltip> */}
            </nav>
        </div>
      </TooltipProvider>
      <div className="flex flex-col items-center gap-2">
        <UserNav user={loggedInUser} />
      </div>
    </div>
  );
}