import {
  Button,
  Dialog,
  DialogClose,
  DialogContent,
  DialogFooter,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
  ScrollArea,
} from "@repo/shadcn-ui/components";
import { HelpCircleIcon } from "lucide-react";
import type React from "react";

import { useTranslation } from "../../locales/i18n.ts";

interface HelpButtonProps {
  buttonText: string;
  title?: string;
  content: React.ReactNode;
  className?: string;
}

export const HelpButton = ({
  buttonText,
  title = "",
  content,
  className = "",
}: HelpButtonProps) => {
  const { t } = useTranslation();
  return (
    <div className={`flex items-baseline justify-center mr-4 font-medium ${className}`}>
      <Dialog>
        <DialogTrigger asChild>
          <Button className="inline-flex items-center font-medium group" variant="link">
            <span className="underline-offset-4 group-hover:underline">{buttonText}</span>
            <HelpCircleIcon className="w-4 h-4 ml-1 text-muted-foreground" />
          </Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[425px]">
          <DialogHeader>
            <DialogTitle>{title}</DialogTitle>
          </DialogHeader>
          <ScrollArea className="grid gap-4 py-2">
            {content}
            <DialogFooter>
              <DialogClose asChild>
                <Button type="button">{t("common.close")}</Button>
              </DialogClose>
            </DialogFooter>
          </ScrollArea>
        </DialogContent>
      </Dialog>
    </div>
  );
};