import * as React from 'react'
import cx from 'classnames'

import './style.scss'

export interface LabelProps extends React.PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>> {
	className?: string
	color?: 'primary' | 'yellow' | 'orange' | 'red' | 'green' | 'teal' | 'black'
}

interface SubComponents {
	Group: typeof LabelGroup
}

const Label: React.FC<LabelProps> & SubComponents = ({
	color = '',
	className,
	children,
	...props
}) => {
	return (
		<span
			className={cx(
				'ska-components-label',
				{
					[`ska-components-label--${color}`]: !!color,
				},
				className
			)}
			{...props}
			children={children}
		/>
	)
}

export interface LabelGroupProps extends React.PropsWithChildren<React.HTMLAttributes<HTMLDivElement>> {
	className?: string
}

const LabelGroup: React.FC<LabelGroupProps> = ({
	className,
	children,
	...props
}) => {
	return (
		<div
			className={cx('ska-components-label__group', className)}
			{...props}
			children={children}
		/>
	)
}

Label.Group = LabelGroup

export default Label