import { html, css } from 'lit';
import { Styles } from '../types/types';
import OlComponent from './OlComponent';

export default class BgColorComponent extends OlComponent {
    onClick: (value: Styles["background-color"]) => void;

    constructor(onClick: (value: Styles["background-color"]) => void) {
        super();
        this.onClick = onClick;
    }

    override styles = css`
    .bg-color-buttons button {
        border-radius: 20px;
        width: 20px;
        height: 20px;
        border: .5px solid black;
    }
    .bg-color-buttons button:hover {
        box-shadow: 2px 2px 3px 2px rgba(0,0,0,.1);
        opacity: 1;
    }`

    override render() {
        return (
            html`
            <style>${this.styles}</style>
            <div class="bg-color-buttons container">
                <button style="background:white" @click=${() => this.onClick("white")} part="button"></button>
                <button style="background:ghostwhite" @click=${() => this.onClick("ghostwhite")} part="button"></button>
                <button style="background:khaki" @click=${() => this.onClick("khaki")} part="button"></button>
                <button style="background:peachpuff" @click=${() => this.onClick("peachpuff")} part="button"></button>
                <button style="background:lightgray" @click=${() => this.onClick("lightgray")} part="button"></button>
                <button style="background:gray" @click=${() => this.onClick("gray")} part="button"></button>
                <button style="background:black" @click=${() => this.onClick("black")} part="button"></button>
            </div>`
        )
    }
}