import { StyledColorPicker, StyledContainer, StyledLabel } from "../../inputs/color-picker/styled-color-picker"
import * as React from 'react';

interface Props {
    label: React.ReactNode;
    name: string;
    value?: string;
    onChange?: (e: { target: { value: string}}) => void;
}

const ColorPicker = (props: Props) => {
    return(
        <StyledContainer>
            <StyledLabel
                htmlFor={props.name}
            >
                {props.label}
            </StyledLabel>
            <StyledColorPicker
                id={props.name}
                name={props.name}
                value={props.value}
                type='color'
                onChange={props.onChange}
            />
        </StyledContainer>
    )
}

export default ColorPicker