Trigger button click on useEffect

"use client"

import { useEffect, useRef } from "react"
import { usePathname, useRouter, useSearchParams } from "next/navigation"

import { Button } from "@/components/ui/button"
import {
  Sheet,
  SheetContent,
  SheetDescription,
  SheetHeader,
  SheetTitle,
  SheetTrigger,
} from "@/components/ui/sheet"
import { DashboardOverview } from "@/components/overview"

export function DashboardSheet() {
  const sheetButtonRef = useRef<HTMLButtonElement>(null)
  const router = useRouter()
  const pathname = usePathname()
  const searchParams = useSearchParams()

  const handleOverviewRoute = () => {
    router.push(`${pathname}?tab=overview`)
  }

  useEffect(() => {
    if (searchParams.get("tab") === "overview" && sheetButtonRef.current) {
      sheetButtonRef.current.click()
    }
  }, [pathname, router, searchParams, sheetButtonRef])

  return (
    <Sheet>
      <SheetTrigger>
        <Button ref={sheetButtonRef} onClick={handleOverviewRoute}>
          Open Overview
        </Button>
      </SheetTrigger>
      <SheetContent side="rightHalfFull" className="z-[1200]">
        <SheetHeader>
          <SheetTitle className="py-2">Overview</SheetTitle>
          <SheetDescription>
            <DashboardOverview />
          </SheetDescription>
        </SheetHeader>
      </SheetContent>
    </Sheet>
  )
}