"use client"

import Link from "next/link"
import { Button } from "@/components/ui/button"
import { X } from "lucide-react"
import { useSidebar } from "@/context/SidebarContext"
import config from "@/config.json"
import strings from "@/strings.json"

export function MobileSidebar() {
  const { isOpen, toggleSidebar } = useSidebar()

  return (
    <aside
      className={`fixed inset-y-0 left-0 z-30 w-64 transform overflow-y-auto bg-background px-4 py-6 transition-transform duration-300 ease-in-out ${
        isOpen ? "translate-x-0" : "-translate-x-full"
      }`}
    >
      <div className="flex items-center justify-between mb-6 mt-12">
        <Link href="/" className="text-4xl font-bold text-primary">
          {process.env.BLOG_NAME || strings.blogPop}
        </Link>
        <Button variant="ghost" size="icon" onClick={toggleSidebar} className="md:hidden">
          <X className="h-6 w-6" />
          <span className="sr-only">{strings.screenReaderCloseSidebar}</span>
        </Button>
      </div>
      <nav className="flex flex-col space-y-4">
        <Link href="/" className="text-lg text-muted-foreground hover:text-primary">
          {strings.homeLinkTextNavbar}
        </Link>
        <Link href="/categories" className="text-lg text-muted-foreground hover:text-primary">
          {strings.categoriesLinkTextNavbar}
        </Link>
        {config.personalWebsite && (
          <Link href={config.personalWebsiteUrl} className="text-lg text-muted-foreground hover:text-primary">
            {config.personalWebsiteLinkText}
          </Link>
        )}
      </nav>
    </aside>
  )
}