"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
import { Label } from "@/components/ui/label"
import { Switch } from "@/components/ui/switch"
import { Separator } from "@/components/ui/separator"
import { Mail, Bell, Phone, Save } from "lucide-react"

export default function Page() {
    const [notifications, setNotifications] = useState({
        email: true,
        push: false,
        sms: true,
        marketing: false,
    })

    return (
        <div className="space-y-6">
            <div>
                <h2 className="text-2xl font-bold tracking-tight">通知设置</h2>
                <p className="text-muted-foreground">选择您希望接收的通知类型和频率</p>
            </div>

            <Card>
                <CardHeader>
                    <CardTitle>通知偏好</CardTitle>
                    <CardDescription>选择您希望接收的通知类型</CardDescription>
                </CardHeader>
                <CardContent className="space-y-6">
                    <div className="space-y-4">
                        <div className="flex items-center justify-between">
                            <div className="space-y-1">
                                <Label className="flex items-center gap-2">
                                    <Mail className="h-4 w-4" />
                                    邮件通知
                                </Label>
                                <p className="text-sm text-muted-foreground">接收重要更新和活动通知</p>
                            </div>
                            <Switch
                                checked={notifications.email}
                                onCheckedChange={(checked) => setNotifications({ ...notifications, email: checked })}
                            />
                        </div>

                        <Separator />

                        <div className="flex items-center justify-between">
                            <div className="space-y-1">
                                <Label className="flex items-center gap-2">
                                    <Bell className="h-4 w-4" />
                                    推送通知
                                </Label>
                                <p className="text-sm text-muted-foreground">在浏览器中接收实时通知</p>
                            </div>
                            <Switch
                                checked={notifications.push}
                                onCheckedChange={(checked) => setNotifications({ ...notifications, push: checked })}
                            />
                        </div>

                        <Separator />

                        <div className="flex items-center justify-between">
                            <div className="space-y-1">
                                <Label className="flex items-center gap-2">
                                    <Phone className="h-4 w-4" />
                                    短信通知
                                </Label>
                                <p className="text-sm text-muted-foreground">接收安全相关的短信提醒</p>
                            </div>
                            <Switch
                                checked={notifications.sms}
                                onCheckedChange={(checked) => setNotifications({ ...notifications, sms: checked })}
                            />
                        </div>

                        <Separator />

                        <div className="flex items-center justify-between">
                            <div className="space-y-1">
                                <Label>营销邮件</Label>
                                <p className="text-sm text-muted-foreground">接收产品更新和促销信息</p>
                            </div>
                            <Switch
                                checked={notifications.marketing}
                                onCheckedChange={(checked) => setNotifications({ ...notifications, marketing: checked })}
                            />
                        </div>
                    </div>

                    <Button className="gap-2">
                        <Save className="h-4 w-4" />
                        保存通知设置
                    </Button>
                </CardContent>
            </Card>
        </div>
    )
}