import type { FunctionalComponent } from 'preact';
import { h, Fragment } from 'preact';
import { useState, useRef, useEffect } from 'preact/hooks';

export type CodeBar = {
  content: string;
  command: string;
};

const CodeBar: FunctionalComponent = ({ content, command }) => {
  const [clicked, setClicked] = useState(false);
  const [titleTxt, setTitleTxt] = useState('Copy Command to Clipboard');
  useEffect(() => {
    const timeout = setTimeout(() => {
      setClicked(false);
      setTitleTxt('Copy Command to Clipboard');
    }, 1500);
    return () => clearTimeout(timeout);
  }, [clicked]);
  /**
   *
   */
  function onClick(e) {
    setClicked(true);
    setTitleTxt('Copied to Clipboard!');
    const titleAttr = e.target;
    const clipboard = navigator.clipboard;
    return clipboard.writeText(`${command}`);
  }

  return (
    <div style="cursor:pointer;" onClick={onClick} title={titleTxt}>
      <code>{content}</code>
    </div>
  );
};

export default CodeBar;