import styled from 'styled-components';
import { getCardVariant, getCardInteractiveStyles } from './utils.js';
import { getSpacing } from '../../utils/index.js';

const Card = styled.div `
  display: flex;
  flex-direction: column;
  border-radius: ${(props) => props.theme.radius.roundedC};
  box-shadow: ${(props) => props.theme.elevation.e1};
  ${getCardVariant};
  ${getCardInteractiveStyles}
`;
Card.displayName = 'Card';
const CardContent = styled.div `
  display: flex;
  flex-direction: column;
  padding: ${getSpacing('s04', 's05')};
  width: 100%;
`;
CardContent.displayName = 'CardContent';
const CardHeader = styled.div `
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: space-between;
  padding: ${getSpacing('s05', 's05', 's04')};
  width: 100%;

  h1,
  h2,
  h3,
  h4 {
    margin: 0;
  }
`;
CardHeader.displayName = 'CardHeader';
const CardActions = styled.div `
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: flex-end;
  padding: ${getSpacing('s04', 's05', 's05')};
  width: 100%;
`;
CardActions.displayName = 'CardActions';

export { Card, CardActions, CardContent, CardHeader };
