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

import { t } from "i18next";
import { HelpCircleIcon } from "lucide-react";
import React from "react";

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

export const HelpButton = ({
  buttonText,
  title = "",
  content,
  className = "",
}: HelpButtonProps) => {
  return (
    <div className={`flex items-baseline justify-center mr-4 font-medium ${className}`}>
      <Dialog>
        <DialogTrigger asChild>
          <Button variant='link' className='inline-flex items-center font-medium group'>
            <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>
  );
};