import React from "react";
import styled from "styled-components";

import { SelectBox } from "../../../base";

const Title = styled.div`
    margin-bottom: 5px;
    font-weight: bold;
`;
const LibraryTypeSelectBoxContainer = styled.div`
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-gap: 11px;
`;

export const LibraryTypeSelection = ({ onSelect, libraryType }) => (
    <div>
        <Title>Library Type</Title>
        <LibraryTypeSelectBoxContainer>
            <SelectBox onClick={() => onSelect("Normal")} active={libraryType === "Normal"}>
                Normal
            </SelectBox>

            <SelectBox onClick={() => onSelect("sRNA")} active={libraryType === "sRNA"}>
                sRNA
            </SelectBox>

            <SelectBox onClick={() => onSelect("Amplicon")} active={libraryType === "Amplicon"}>
                Amplicon
            </SelectBox>
        </LibraryTypeSelectBoxContainer>
    </div>
);

@@ -585,16 +585,104 @@
  Normal%0A
+                %3Cspan%3ESearch against whole genome references using normal reads.%3C/span%3E%0A
         
@@ -690,32 +690,32 @@
    %3C/SelectBox%3E%0A
-
 %0A            %3CSe
@@ -809,16 +809,101 @@
    sRNA%0A
+                %3Cspan%3ESearch against whole genome references using sRNA reads%3C/span%3E%0A
         
@@ -1013,24 +1013,24 @@
 Amplicon%22%7D%3E%0A
-
             
@@ -1042,16 +1042,101 @@
 mplicon%0A
+                %3Cspan%3ESearch against barcode references using amplicon reads.%3C/span%3E%0A
         

Add library type descriptions