"use client"

import { Dialog, DialogContent, DialogHeader, DialogTitle } from "@/components/ui/dialog"
import { Button } from "@/components/ui/button"
import { Check } from "lucide-react"

interface PosterTemplate {
  id: string
  title: string
  type: "领取" | "了解"
  imageUrl: string
}

interface PosterSelectorProps {
  open: boolean
  onOpenChange: (open: boolean) => void
  onSelect: (template: PosterTemplate) => void
}

const templates: PosterTemplate[] = [
  {
    id: "1",
    title: "点击领取",
    type: "领取",
    imageUrl: "/placeholder.svg?height=400&width=300",
  },
  {
    id: "2",
    title: "点击了解",
    type: "了解",
    imageUrl: "/placeholder.svg?height=400&width=300",
  },
  // ... 其他模板
]

export function PosterSelector({ open, onOpenChange, onSelect }: PosterSelectorProps) {
  return (
    <Dialog open={open} onOpenChange={onOpenChange}>
      <DialogContent className="max-w-4xl">
        <DialogHeader>
          <DialogTitle>选择海报</DialogTitle>
        </DialogHeader>

        <div>
          <h3 className="text-sm text-gray-500 mb-4">点击下方海报使用该模板</h3>
          <div className="grid grid-cols-3 gap-6">
            {templates.map((template) => (
              <div
                key={template.id}
                className="group relative cursor-pointer"
                onClick={() => {
                  onSelect(template)
                  onOpenChange(false)
                }}
              >
                <div className="aspect-[3/4] rounded-lg overflow-hidden bg-gray-100">
                  <img
                    src={template.imageUrl || "/placeholder.svg"}
                    alt={template.title}
                    className="w-full h-full object-cover transition-transform group-hover:scale-105"
                  />
                </div>
                <div className="absolute inset-0 flex items-center justify-center opacity-0 bg-black/50 group-hover:opacity-100 transition-opacity">
                  <Check className="w-8 h-8 text-white" />
                </div>
                <div className="mt-2 text-center">
                  <div className="font-medium">{template.title}</div>
                  <div className="text-sm text-gray-500">{template.type}类型</div>
                </div>
              </div>
            ))}
          </div>
        </div>

        <div className="flex justify-end space-x-2 mt-4">
          <Button variant="outline" onClick={() => onOpenChange(false)}>
            关闭
          </Button>
          <Button>新建海报</Button>
        </div>
      </DialogContent>
    </Dialog>
  )
}