import styled from 'styled-components';
import * as React from 'react';

interface Props {
    style?: React.CSSProperties;
    id: string;
    title?: string;
    children?: React.ReactNode;
    onClick?: (e?: any) => void;
    clickable?: boolean;
}

const ListItem = (props: Props) => (
    <StyledListItem
        id={props.id}
        style={props.style}
        clickable={props.clickable}
        onClick={props.onClick}
    >
        {props.children && !props.title && props.children}
        {!props.children && props.title && props.title}
    </StyledListItem>
);

export const StyledListItem = styled.div<Props>`
    background-color: ${({ theme }) => theme.colorPalette.primary.main};
    padding: 10px;
    text-align: center;
    ${props => props.clickable && `
        &:hover{
            opacity: 0.8;
            cursor: pointer;
        }

        &:active {
            transform: scale(0.95);
        }
    `}
`;

ListItem.defaultProps = {
    clickable: true,
}

export default ListItem;