<script>
export default {
  props: {
    terminalContent: {
      required: true,
      type: String
    }
  }
}
</script>

<template>
  <div
    class="bg-slate-900 flex-row rounded-xl w-4/5 md:w-96 max-w-full md:min-w-max h-56 md:z-10 -mb-8 md:-mb-0"
  >
    <div class="p-3 flex justify-between w-20">
      <div class="bg-green-400 h-4 w-4 r-1 rounded-full" />
      <div class="bg-yellow-300 h-4 w-4 r-1 rounded-full" />
      <div class="bg-red-600 h-4 w-4 r-1 rounded-full" />
    </div>
    <div class="flex h-4/5">
      <code
        class="w-full text-white font-mono text-base p-4 pt-0 mr-0 overflow-scroll whitespace-pre"
      >
        {{ terminalContent }}
        <span
          ref="terminal"
          class="w-2 h-4 bg-white inline-block relative"
          style="margin-bottom: -2px"
        />
      </code>
    </div>
  </div>
</template>
