import { 
  Dialog, 
  DialogContent, 
  DialogTitle, 
  DialogDescription,
  DialogClose
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { X } from "lucide-react";
import "./index.css";

export const ReceiveDialog = ({ 
  isOpen = false, 
  onOpenChange,
  onConfirm 
}: { 
  isOpen?: boolean; 
  onOpenChange?: (open: boolean) => void;
  onConfirm?: () => void;
}) => {
  return (
    <Dialog open={isOpen} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-md border-none bg-transparent p-0 shadow-none">
        <DialogTitle className="sr-only">接收新消息</DialogTitle>
        <DialogDescription className="sr-only">您有一条新的消息，是否立即查看？</DialogDescription>
        <DialogClose className="absolute right-[38px] top-2 z-10 rounded-full w-[28px] h-[28px] bg-[#acacad] flex items-center justify-center bg-[#FFFFFF33]">
        <X  className="w-[12px] h-[12px] text-white"/>
          <span className="sr-only" onClick={() => onOpenChange?.(false)}>关闭</span>
        </DialogClose>
        <div className="relative flex flex-col items-center">
          <img 
            src="/icons/receive.png" 
            alt="接收" 
            className="rounded-lg w-full h-[286px] px-[48px]"
          />
          <div className="absolute top-1/2 left-0 right-0 flex flex-col items-center px-[20px] py-[17px] text-center mx-[48px] rounded-[40px] custom-bg">
            <h3 className="font-[600] text-[18px] text-black mb-[7px]">AI通话时长送你啦～</h3>
            <p className="text-sm text-white/90 mb-6 text-[#666]">志愿怎么选？分数能上哪？六维AI填报师来帮你解答~</p>
            <div className="flex space-x-4 w-full justify-center">

              <Button 
                className="bg-[#1580FF] text-white w-full rounded-[50px] text-[16px] py-[11px]"
                onClick={() => {
                  onConfirm?.();
                  onOpenChange?.(false);
                }}
              >
                领取时长
              </Button>
            </div>
          </div>
        </div>
      </DialogContent>
    </Dialog>
  );
};