"use client"

import { Info } from "lucide-react"
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog"
import { cn } from "@/lib/utils"

interface HelpButtonProps {
  title: string
  content: React.ReactNode
  size?: "sm" | "md"
  triggerClassName?: string
}

export function HelpButton({ title, content, size = "sm", triggerClassName }: HelpButtonProps) {
  return (
    <Dialog>
      <DialogTrigger asChild>
        <button
          type="button"
          className={cn(
            "inline-flex items-center justify-center gap-2",
            "text-gray-600 hover:text-blue-600 dark:text-gray-400 dark:hover:text-blue-400",
            "transition-colors duration-200",
            "focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 rounded-md",
            size === "sm" ? "p-2" : "px-3 py-2",
            triggerClassName,
          )}
          aria-label={`Open help: ${title}`}
        >
          <Info className={size === "sm" ? "h-5 w-5" : "h-4 w-4"} />
          {size === "md" && <span className="text-sm font-medium">Help</span>}
        </button>
      </DialogTrigger>
      <DialogContent className="max-w-2xl max-h-[80vh] overflow-y-auto">
        <DialogHeader>
          <DialogTitle>{title}</DialogTitle>
          <DialogDescription asChild>
            <div className="text-left pt-4">{content}</div>
          </DialogDescription>
        </DialogHeader>
      </DialogContent>
    </Dialog>
  )
}
