import React, { Component } from 'react'
import { Paper, Typography } from '@material-ui/core'
import Images from '../../assets/Images'

export default class StrategiMap extends Component {
    render() {
        return (
            <div style={{ padding: 20 }}>
                <Paper style={{ borderRadius: 10, boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.5)' }}>
                    <div style={{ height: 56, backgroundColor: '#f1f1f1', display: 'flex' }}>
                        <div style={{ width: '100%', borderBottom: 'solid 3px #979696 ', display: 'grid', alignContent: 'center', marginLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Category</Typography>
                        </div>
                        <div style={{ width: '75%', borderBottom: 'solid 3px #979696 ', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>KPI</Typography>
                        </div>
                        <div style={{ width: '100%', borderBottom: 'solid 3px #979696 ', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Trends</Typography>
                        </div>
                        <div style={{ width: '75%', borderBottom: 'solid 3px #979696 ', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Current</Typography>
                        </div>
                        <div style={{ width: '75%', borderBottom: 'solid 3px #979696 ', marginRight: 20, display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Achievement</Typography>
                        </div>
                    </div>
                    <div style={{ height: 56, backgroundColor: '#f1f1f1', display: 'flex' }}>
                        <div style={{ width: '100%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', marginLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Category</Typography>
                        </div>
                        <div style={{ width: '75%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>KPI</Typography>
                        </div>
                        <div style={{ width: '100%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Trends</Typography>
                        </div>
                        <div style={{ width: '75%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Current</Typography>
                        </div>
                        <div style={{ width: '75%', borderBottom: 'solid 1px #979696 ', marginRight: 20, display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Achievement</Typography>
                        </div>
                    </div>
                    <div style={{ height: 56, backgroundColor: '#f1f1f1', display: 'flex' }}>
                        <div style={{ width: '100%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', marginLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}></Typography>
                        </div>
                        <div style={{ width: '75%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>KPI</Typography>
                        </div>
                        <div style={{ width: '100%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Trends</Typography>
                        </div>
                        <div style={{ width: '75%', borderBottom: 'solid 1px #979696 ', display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Current</Typography>
                        </div>
                        <div style={{ width: '75%', borderBottom: 'solid 1px #979696 ', marginRight: 20, display: 'grid', alignContent: 'center', paddingLeft: 20 }}>
                            <Typography style={{ color: '#656565', fontWeight: 'bold', fontSize: 12 }}>Achievement</Typography>
                        </div>
                    </div>
                </Paper>
            </div>
        )
    }
}