"use client"

import Link from "next/link"
import { Bell } from "lucide-react"
import { Switch } from "@/components/ui/switch"
import { Label } from "@/components/ui/label"
import { useNotificationSettings } from "@/contexts/notification-settings-context"
import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "@/components/ui/breadcrumb"

export function NotificationsMain() {
  const { showBell, setShowBell } = useNotificationSettings()

  return (
    <div className="py-6 space-y-6">
      <div className="font-semibold">
        <Breadcrumb>
          <BreadcrumbList>
            <BreadcrumbItem>
              <BreadcrumbLink asChild>
                <Link href="/settings" className="text-base text-primary">设置</Link>
              </BreadcrumbLink>
            </BreadcrumbItem>
            <BreadcrumbSeparator />
            <BreadcrumbItem>
              <BreadcrumbPage className="text-base font-semibold">通知设置</BreadcrumbPage>
            </BreadcrumbItem>
          </BreadcrumbList>
        </Breadcrumb>
      </div>

      <div className="space-y-6">
        <div>
          <h2 className="font-medium text-sm text-foreground">通知显示</h2>
          <p className="text-xs text-muted-foreground">
            设置通知相关的显示选项
          </p>
        </div>

        <div className="flex items-center justify-between rounded-lg border p-4">
          <div className="flex items-center gap-3">
            <Bell className="size-5 text-primary" />
            <div className="space-y-0.5">
              <Label htmlFor="show-bell" className="text-sm font-medium cursor-pointer">
                显示通知铃铛
              </Label>
              <p className="text-xs text-muted-foreground">
                在顶部导航栏中显示通知铃铛图标
              </p>
            </div>
          </div>
          <Switch
            id="show-bell"
            checked={showBell}
            onCheckedChange={setShowBell}
          />
        </div>
      </div>
    </div>
  )
}