// @flow
import React from 'react';
import styled, { css } from 'styled-components';
import type { SectionProps } from './section.proptypes';
import { getPaletteColor } from '../../../../mixins/branding';
import { Box } from '../../../../primitives/box';
import { UnstyledButton } from '../../../behaviors';
import { getCardBorderRadius } from '../card.css-rules';

const commonStyles = css`
  border-bottom: solid 1px ${getPaletteColor('greyscale-light')};

  &:last-of-type {
    border-bottom: none;
  }
`;

const SectionBox = styled(Box)`
  ${commonStyles}
`;

const SectionButton = styled(UnstyledButton)`
  display: block;
  width: 100%;
  ${commonStyles}

  &:hover {
    background: ${getPaletteColor('background')};
  }

  &:first-child {
    border-radius: ${getCardBorderRadius} ${getCardBorderRadius} 0 0;
  }

  &:last-child {
    border-radius: 0 0 ${getCardBorderRadius} ${getCardBorderRadius};
  }
`;

export const CardSection = (props: SectionProps) =>
  props.onClick ? (
    <SectionButton {...props} insetFocus />
  ) : (
    <SectionBox {...props} />
  );
