import { Button } from "@/components/ui/button"
import {
  Dialog,
  DialogClose,
  DialogContent,
  DialogHeader,
  DialogTitle,
} from "@/components/ui/dialog"

interface AnnouncementModalProps {
  open: boolean
  onOpenChange: (open: boolean) => void
}

export default function AnnouncementModal({
  open,
  onOpenChange,
}: AnnouncementModalProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent
        className="sm:max-w-120 p-0 gap-0 overflow-hidden rounded-xl border-none shadow-2xl bg-white"
        showCloseButton
      >
        <div className="p-8 pb-4">
          <DialogHeader className="mb-4">
            <DialogTitle className="text-3xl font-bold text-center text-gray-800">
              公告
            </DialogTitle>
          </DialogHeader>

          <div className="text-sm text-gray-600 space-y-4">
            <p className="text-xs text-gray-500 leading-relaxed">
              杜绝电信诈骗及任何违法行为，所有IP产品已记录日志，均保留6个月以上，发现违法行为直接提交网监部门处理
            </p>

            <div className="pt-1">
              <span className="font-bold  text-gray-700">重磅打造</span>
              <p>1. 极光IP(聚IP池子最大的动态产品)，240城市纯净住宅IP</p>
              <p>2. 极狐IP(聚IP网速最快的动态产品)，260城市纯净住宅IP</p>
            </div>

            <div className="mt-2">
              <p className="text-blue-500 font-medium text-[13px] leading-relaxed">
                稳定极速！视频直播无压力！且有不同宽带可选！承诺不好用48小时内免费退款
              </p>
            </div>
          </div>
        </div>

        <div className="flex mt-2">
          <DialogClose asChild className="flex-1">
            <Button className="w-full h-14 rounded-none bg-linear-to-r from-blue-500 to-cyan-400 hover:opacity-90 text-white text-lg font-medium border-0 rounded-bl-xl">
              查看活动
            </Button>
          </DialogClose>

          <DialogClose asChild className="flex-1">
            <Button className="w-full h-14 rounded-none bg-linear-to-r from-cyan-400 to-blue-500 hover:opacity-90 text-white text-lg font-medium border-0 rounded-br-xl">
              联系客服
            </Button>
          </DialogClose>
        </div>
      </DialogContent>
    </Dialog>
  )
}
