import type { User } from "@/services/auth"
import { SidebarMenu, SidebarMenuButton, SidebarMenuItem } from "../ui/sidebar"
import NumberFlow from '@number-flow/react'
import { useEffect, useState } from "react"

interface NavPlanProps {
  user: User
}

export function NavPlan({ user }: NavPlanProps) {
  const [credits, setCredits] = useState(0)
  
  useEffect(() => {
    setCredits(user.credits)
  }, [user])

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton
          size="lg"
          className="data-[state=open]:bg-sidebar-accent data-[state=open]:text-sidebar-accent-foreground"
        >
          <div className="grid flex-1 text-left text-sm leading-tight">
            <span className="truncate font-semibold">
              Plan: {user.plan.name}
            </span>
            <span className="truncate text-xs">
              Credits: <NumberFlow value={credits} />
            </span>
          </div>
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}