import React from 'react';

import Icon from '../Icon';
import Button from '../Button';
import Typography from '../Typography';
import ExpansionPanel from '../ExpansionPanel';
import Sliders from '../Sliders';
import ColorSelect from '../ColorSelect';

import { Group, Item, SliderWrapper } from '../../global/toolStyled';
import data from './data';

const Highlight = () => {
  return (
    <ExpansionPanel 
      label={
        <Button shouldFitContainer align="left">
          <Icon glyph="highlight" style={{marginRight: '10px'}}/>
          Highlight Tools
        </Button>
      }
    >
      <Typography variant="subtitle" style={{marginTop: '8px'}}>Style</Typography>
      <Group>
        {data.lineType.map((ele) => (
          <Item key={ele.key}>
            <Icon glyph={ele.icon} />
          </Item>
        ))}
      </Group>
      <ColorSelect />
      <Typography variant="subtitle" style={{marginTop: '8px'}}>Opacity</Typography>
      <Group>
        <SliderWrapper>
          <Sliders />
        </SliderWrapper>
        40%
      </Group>
    </ExpansionPanel>
  );
};

export default Highlight;