Как можно улучшить этот код компонента?

Учусь писать компоненты, вот набросал.

Вопрос. Можно ли работать с styled-components более удобнее? Постоянно писать подобные условия для свойств утомительно и не очень красиво, как по мне.

index.js

import { Button } from "./Button";

Button.defaultProps = {
  color: "primary",
  shadow: true
};

export { Button };

Button.js

import React from "react";
import styled from "styled-components";

const ButtonDefault = ({ children = "Отправить", className, onClick }) => (
  <div className={className} onClick={onClick}>
    {children}
  </div>
);

export const Button = styled(ButtonDefault)`
  color: ${({ color }) =>
    color === "dark" ? "white" : color === "light" ? "black" : "white"};
  background: ${({ color }) =>
    color === "dark"
      ? "black"
      : color === "light"
      ? "white"
      : color === "primary"
      ? "blue"
      : color};
  display: inline-block;
  padding: 14px;
  cursor: pointer;
  border-radius: 3px;
  border: ${({ color }) => (color === "light" ? "1px solid black" : "none")};
  box-shadow: ${({ shadow }) => shadow && "2px 2px 4px black;"};
  :hover {
    opacity: 0.8;
  }
`;