import "./Terminal.css";
import copy from "clipboard-copy";

interface TerminalProps {
	title?: string;
	code: string;
}

const Terminal = ({ title, code }: TerminalProps) => {
	return (
		<div className="terminal">
			<div id="title-bar">
				<div id="title-bar-buttons">
					<div className="title-bar-button" id="close" />
					<div className="title-bar-button" id="minimize" />
					<div className="title-bar-button" id="maximize" />
				</div>
				<div id="title-bar-title">{title}</div>
				<div id="title-bar-actions">
					<button
						type="button"
						className="title-bar-action"
						onClick={() => copy(code)}
					>
						Copy
					</button>
				</div>
			</div>
			<pre>
				<code>{code}</code>
			</pre>
		</div>
	);
};

export default Terminal;