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}
				activeClassName={classes.navTabActive}
			>
				{tabNames.COMMUNITY_HEALTH_CENTER}
			</NavTab>
		</div>
		<div className={classes.gridItems}>
			<NavTab
				to="/verification/pregnancy-resource-center"
				className={classes.navTab}
				activeClassName={classes.navTabActive}
			>
				{tabNames.PREGNANCY_RESOURCE_CENTER}
			</NavTab>
		</div>
	</div>
)

const styles = {
	grid: {
		display: 'grid',
		'grid-template-columns': 'repeat(2, 1fr)',
		height: '47px',
		'line-height': '47px',
		color: '#FFFFFF',
		'font-family': 'sans-serif',
		'font-size': '16px',
		'letter-spacing': '4px',
		'text-transform': 'uppercase',
		cursor: 'pointer',
		'text-align': 'center',
	},
	gridItems: {
		display: 'flex',
	},
	navTab: {
		'background-color': 'rgba(240,100,154,0.15)',
		'text-decoration': 'none',
		color: 'inherit',
		width: '100%',
		height: '100%',
		'&:hover': {
			'background-color': '#F0649A',
		},
	},
	navTabActive: {
		'background-color': '#F0649A',
	},
}

export default injectSheet(styles)(Tabs)

import React from 'react'
import injectSheet from 'react-jss'
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}
				activeClassName={classes.navTabActive}
			>
				{tabNames.COMMUNITY_HEALTH_CENTER}
			</NavTab>
		</div>
		<div className={classes.gridItems}>
			<NavTab
				to="/verification/pregnancy-resource-center"
				className={classes.navTab}
				activeClassName={classes.navTabActive}
			>
				{tabNames.PREGNANCY_RESOURCE_CENTER}
			</NavTab>
		</div>
	</div>
)

const styles = {
	grid: {
		display: 'grid',
		'grid-template-columns': 'repeat(2, 1fr)',
		height: '47px',
		'line-height': '47px',
		color: '#FFFFFF',
		'font-family': 'sans-serif',
		'font-size': '16px',
		'letter-spacing': '4px',
		'text-transform': 'uppercase',
		cursor: 'pointer',
		'text-align': 'center',
	},
	gridItems: {
		display: 'flex',
	},
	navTab: {
		'background-color': 'rgba(240,100,154,0.15)',
		'text-decoration': 'none',
		color: 'inherit',
		width: '100%',
		height: '100%',
		'&:hover': {
			'background-color': '#F0649A',
		},
	},
	navTabActive: {
		'background-color': '#F0649A',
	},
}

export default injectSheet(styles)(Tabs)

Remove unused import