import React from 'react'
import injectSheet from 'react-jss'
import { Link } from 'react-router-dom'
import { NavTab } from 'react-router-tabs'

import { tabNames } from '../constants'

const Tabs = ({ classes }) => (
	<div className={classes.grid}>
		<div className={classes.gridItems}>
			<NavTab
				to="/verification/community-health-center"
				className={classes.navTab}
			>
				{tabNames.COMMUNITY_HEALTH_CENTER}
			</NavTab>
		</div>
		<div className={classes.gridItems}>
			<NavTab
				to="/verification/pregnancy-resource-center"
				className={classes.navTab}
			>
				{tabNames.PREGNANCY_RESOURCE_CENTER}
			</NavTab>
		</div>
	</div>
)

const styles = {
	grid: {
		display: 'grid',
		'grid-template-columns': 'repeat(2, 1fr)',
		'grid-template-rows': '1',
		height: '47px',
		color: '#FFFFFF',
		'font-family': 'sans-serif',
		'font-size': '16px',
		'letter-spacing': '4px',
		'line-height': '20px',
		'text-transform': 'uppercase',
		cursor: 'pointer',
	},
	gridItems: {
		'justify-self': 'center',
		'align-self': 'center',
		'text-decoration': 'none !important',
	},
	navTab: {
		'background-color': '#F0649A',
		display: 'inline-block',
		padding: '10px 25px',
		'text-decoration': 'none',
		'&:hover': {
			'background-color': 'rgba(240,100,154,0.15)',
		},
	},
	navTabActive: {
		'background-color': 'rgba(240,100,154,0.15)',
	},
}

export default injectSheet(styles)(Tabs)

@@ -363,32 +363,75 @@
 classes.navTab%7D%0A
+%09%09%09%09activeClassName=%7Bclasses.navTabActive%7D%0A
 %09%09%09%3E%0A%09%09%09%09%7BtabNam
@@ -609,16 +609,59 @@
 navTab%7D%0A
+%09%09%09%09activeClassName=%7Bclasses.navTabActive%7D%0A
 %09%09%09%3E%0A%09%09%09
@@ -1124,48 +1124,8 @@
 r',%0A
-%09%09'text-decoration': 'none !important',%0A
 %09%7D,%0A
@@ -1162,15 +1162,30 @@
 ': '
-#F0649A
+rgba(240,100,154,0.15)
 ',%0A%09
@@ -1263,16 +1263,36 @@
 'none',%0A
+%09%09color: 'inherit',%0A
 %09%09'&:hov
@@ -1322,38 +1322,23 @@
 olor': '
-rgba(240,100,154,0.15)
+#F0649A
 ',%0A%09%09%7D,%0A
@@ -1381,38 +1381,23 @@
 olor': '
-rgba(240,100,154,0.15)
+#F0649A
 ',%0A%09%7D,%0A%7D

Use correct active/inactive colors