import React from "react"

import { CopyToClipboard } from "react-copy-to-clipboard"

import AnchorLink from "./mdx/anchor-link"
import CodeBlock from "./code-block"

const WorkerStarter = props => {
  const { title, description, repo } = props
  const repoLink = `https://github.com/${repo}`
  const command = `wrangler generate my-app ${repoLink}`

  return (
    <div className="WorkerStarter">
      <div className="WorkerStarter--title">
        <AnchorLink className="Link" href={repoLink}>{title}</AnchorLink>
      </div>
      <div className="WorkerStarter--description">{description}</div>
      <div className="WorkerStarter--command">
        <div className="WorkerStarter--command-copy-button-wrapper">
          <CopyToClipboard text={command}>
            <button className="Button">Copy</button>
          </CopyToClipboard>
        </div>
        <div className="WorkerStarter--command-codeblock-wrapper">
          <CodeBlock lang="txt">{command}</CodeBlock>
        </div>
      </div>
    </div>
  )
}

export default WorkerStarter