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

import {
	Button,
	ColorIndicator,
	type ButtonProps,
	type ColorIndicatorProps,
} from '@ska/components'

import './style.scss'

export type ColorIndicatorButtonProps = {
	colorValue: ColorIndicatorProps['colorValue']
	className?: string
	children?: React.ReactNode
} & ButtonProps

const ColorIndicatorButton: React.FC<ColorIndicatorButtonProps> = ({
	colorValue,
	className,
	children,
	...props
}) => {
	return (
		<Button
			className={cx('ska-color-indicator-button', className)}
			{...props}
		>
			<ColorIndicator colorValue={colorValue} />
			{children}
		</Button>
	)
}

export default ColorIndicatorButton