import React from 'react';
import PropTypes from 'prop-types';
import { withTheme } from '../styles';
import Flex from '../Flex';

import CardStyled from './Card.styled';

const CardComponent = (props) => {
  const { children, notClickable } = props;

  if (notClickable) {
    return (
      <Flex
        borderRadius={10}
        border="1px solid"
        borderColor="colorPalette.gray.g100"
        flexWrap="wrap"
        alignItems="row"
        overflow="hidden"
        {...props}
      >
        {children}
      </Flex>
    );
  }

  return (
    <CardStyled
      borderRadius={10}
      border="1px solid"
      borderColor="colorPalette.gray.g100"
      flexWrap="wrap"
      alignItems="row"
      overflow="hidden"
      {...props}
    >
      {children}
    </CardStyled>
  );
};

CardComponent.propTypes = {
  children: PropTypes.node.isRequired,
  notClickable: PropTypes.bool,
};

CardComponent.defaultProps = {
  notClickable: false,
};

CardComponent.displayName = 'Card';

export default withTheme(CardComponent);