// Path: src/components/Post/Spoiler.tsx
import type { Component, JSX } from "solid-js";
import { createSignal } from "solid-js";
import styles from "./Spoiler.module.scss";

interface Props {
	title?: string;
	buttonText?: string;
	children: JSX.Element;
}

const Spoiler: Component<Props> = (props) => {
	const [visible, setVisible] = createSignal(false);

	return (
		<blockquote class={styles.spoiler}>
			{props.title ? <strong class={styles.spoilerTitle}>{props.title}</strong> : <></>}
			<button onClick={() => setVisible(!visible())}>
				{visible() ? "Hide" : "Show"}
				{props.buttonText ? `${props.buttonText}` : " Answer"}
			</button>

			{visible() && <div class={styles.spoilerContent}>{props.children}</div>}
		</blockquote>
	);
};

export default Spoiler;