import React from 'react';
import { WordpressTaxonomy } from '../models/wp';
import { black, borderRadius, Clickable, Flex, secondary, WrapperProps } from 'dot-design-system';

interface Props extends WrapperProps {
	item: WordpressTaxonomy;
	active: boolean;
}

function TaxonomyButton({ item, active, ...props }: Props) {
	return (
		<Flex
			component={Clickable}
			alignItems={'center'}
			justifyContent={'center'}
			border={`2px solid ${(active && secondary) || black}`}
			borderRadius={borderRadius}
			color={(active && secondary) || black}
			height={80}
			textAlign={'center'}
			{...props}
		>
			{item.name}
		</Flex>
	);
}

export default TaxonomyButton;