import { onHover } from '@preply/ds-web-core';
import React, { FC } from 'react';
import styled from 'styled-components';

import { RendererProps } from './RendererProps';

const Div = styled.div<RendererProps>`
    background: #999;
    font-size: 16px;
    line-height: 32px;
    text-align: center;
    width: 200px;
    color: white;

    ${onHover(`
        filter: brightness(${({ value }) => value});
    `)}
`;

export const RendererBrightness: FC<RendererProps> = ({ value }) => {
    return <Div value={value}>hover me</Div>;
};