"use client";
import Image from "next/image";
import React from "react";
import AppLogo from "./AppLogo";
import { HandCoins } from "lucide-react";
import Nav from "./Nav";
import { useUserStore } from "@/state/useUserStore";
import { logoutUserAction } from "@/lib/actions/auth";
import { Button } from "@/components/ui/button";

const Sidebar = () => {
  const { user } = useUserStore();

  return (
    <aside className="w-[275px] flex-shrink-0 h-screen pr-8 flex items-start flex-col">
      <div className="w-full flex-col flex mt-4 items-start space-y-4">
        <AppLogo className="mx-auto" />
        <div className="flex items-center space-x-3">
          <Image
            width={500}
            height={500}
            src={user?.profile_image || "/assets/images/default-avatar.webp"}
            alt="Profile"
            className="w-16 h-16 rounded-full object-cover"
          />
          <div>
            <h5 className="">
              {[user?.first_name, user?.last_name].filter(Boolean).length
                ? `${user?.first_name} ${user?.last_name}`
                : "No name"}
            </h5>
            <span className="text-sm text-neutral-700">@{user?.username}</span>
          </div>
        </div>
        <div className="text-primary flex items-center w-fit bg-primary-50 py-2 px-3 rounded text-sm ">
          <HandCoins className="icon" />
          {user?.balance} coins
        </div>
      </div>
      <Nav />
      <div className="mt-auto pb-10 ">
        <Button
          variant={"ghost"}
          size={"sm"}
          className="text-red-600 hover:text-red-600"
          onClick={async () => {
            await logoutUserAction();
          }}
        >
          Log Out
        </Button>
      </div>
    </aside>
  );
};

export default Sidebar;