"use client"

import { ArrowLeft } from "lucide-react"
import {
  SidebarMenu,
  SidebarMenuButton,
  SidebarMenuItem,
} from "@/components/ui/sidebar"
import { WordPressWhiteIcon } from "@/components/icons/swift-commerce-icon"

export function NavUser() {
  // Get the admin URL from WordPress data
  const synkData = (window as unknown as { swiftCommerceData?: { adminUrl?: string } }).swiftCommerceData || {}
  const adminUrl = synkData.adminUrl || '/wp-admin/'

  const handleBackToWordPress = () => {
    // Navigate back to WordPress admin
    window.location.href = adminUrl
  }

  return (
    <SidebarMenu>
      <SidebarMenuItem>
        <SidebarMenuButton
          size="lg"
          onClick={handleBackToWordPress}
          className="hover:bg-sidebar-accent hover:text-sidebar-accent-foreground cursor-pointer"
        >
          <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-blue-600">
            <WordPressWhiteIcon className="size-5" />
          </div>
          <div className="grid flex-1 text-left text-sm leading-tight">
            <span className="truncate font-medium">Back to WordPress</span>
            <span className="truncate text-xs text-muted-foreground">Exit Swift Commerce</span>
          </div>
          <ArrowLeft className="ml-auto size-4" />
        </SidebarMenuButton>
      </SidebarMenuItem>
    </SidebarMenu>
  )
}