'use client'

import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
} from '@/components/ui/dialog'
import { Button } from '@/components/ui/button'
import { Sparkles } from 'lucide-react'

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

/**
 * 欢迎对话框组件
 * 用于在首次进入系统时显示欢迎信息
 */
export function WelcomeDialog({ open, onOpenChange }: WelcomeDialogProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="sm:max-w-[500px]">
        <DialogHeader>
          <div className="flex items-center gap-2">
            <Sparkles className="h-6 w-6 text-primary" />
            <DialogTitle className="text-2xl">欢迎您，开发者</DialogTitle>
          </div>
          <DialogDescription className="pt-4 text-base">
            感谢您选择 Hair Keeper 作为开发底座，祝您开发顺利！
          </DialogDescription>
        </DialogHeader>
        <div className="flex justify-end gap-2 pt-4">
          <Button onClick={() => onOpenChange(false)}>
            开始使用
          </Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}