import styled, { css } from 'styled-components';
import { ButtonProps } from 'types';
import {
	link,
	outlined,
	regular,
	round,
	roundOutlined,
	unstyled,
} from './variants';

const applyVariantStyling = (props: ButtonProps) => {
	switch (props.variant) {
		case 'unstyled':
			return unstyled;
		case 'round':
			return round(props);
		case 'roundOutlined':
			return roundOutlined(props);
		case 'link':
			return link(props);
		case 'outlined':
			return outlined(props);
		case 'regular':
		default:
			return regular(props);
	}
};

export const ButtonStyles = css<ButtonProps>`
	${props => applyVariantStyling(props)}
`;

export const Button = styled.button<ButtonProps>`
	${ButtonStyles}
`;