<template>
  <div class="solution-preview">
    <div
      v-for="(acid, seqNum) in solution.sequencePreview"
      :key="`preview-acid-${seqNum}`"
      :class="{ insert: isInsert(acid), scaffold: isScaffold(acid) }"
      class="preview-acid"
    ></div>
  </div>
</template>

<script>
export default {
  props: ["solution"],
  methods: {
    isInsert(acid) {
      return acid == "I";
    },
    isScaffold(acid) {
      return acid == "S";
    },
  },
};
</script>

<style scoped>
.scaffold {
  background-color: var(--scaffold);
}
.insert {
  background-color: var(--insert);
}
.preview-acid {
    flex-grow: 10;
    height: 10px;
}
.solution-preview {
  display: flex;
}
</style>