import { useTour } from "@reactour/tour";
import clsx from "clsx";
import { FC, HTMLAttributes, ReactNode } from "react";

import { Button } from "../Button";
import styles from "./styles.module.css";

export interface GuidedTourStepProps
  extends Omit<HTMLAttributes<HTMLDivElement>, "content"> {
  title: string;
  content: ReactNode;
  showClose?: boolean;
}

export const GuidedTourStep: FC<GuidedTourStepProps> = ({
  className,
  content,
  showClose,
  title,
  ...props
}) => {
  const { setIsOpen } = useTour();

  return (
    <div className={clsx([styles.guidedTourStep, className])} {...props}>
      <p className={styles.title}>{title}</p>
      <div className={styles.content}>{content}</div>
      {showClose && (
        <Button
          className={styles.closeButton}
          size="small"
          variant="outline"
          themed
          onClick={() => setIsOpen(false)}
        >
          Start Playing!
        </Button>
      )}
    </div>
  );
};