import React from 'react'
import { Button, ConfigProvider, Tooltip } from 'antd'

interface DefaultButtonProps {
    name: string
    clickAction?: () => void
    color: string
    icon: React.ReactNode
    htmlType?: 'button' | 'submit' | 'reset'
}

const CusttomBackgroundButton = (
    props: DefaultButtonProps
): React.ReactElement => {
    const { name = 'Add New', clickAction, color, icon, htmlType } = props

    return (
        <ConfigProvider
            theme={{
                token: {
                    colorPrimary: color,
                },
            }}
        >
            <Tooltip title={name}>
                <Button
                    type="primary"
                    size="middle"
                    icon={icon}
                    onClick={clickAction}
                    htmlType={htmlType}
                >
                    {name}
                </Button>
            </Tooltip>
        </ConfigProvider>
    )
}

export default CusttomBackgroundButton
