import styled from '@emotion/styled';

const StyledPropertyBoxContainer = styled.div`
  align-self: stretch;
  background: ${({ theme }) => theme.background.secondary};
  border: 1px solid ${({ theme }) => theme.border.color.medium};
  border-radius: 4px;
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.spacing(2)};
  padding: ${({ theme }) => theme.spacing(2)} ${({ theme }) => theme.spacing(3)};
`;

interface PropertyBoxProps {
  children: JSX.Element;
  extraPadding?: boolean;
}

export function PropertyBox({ children }: PropertyBoxProps) {
  return <StyledPropertyBoxContainer>{children}</StyledPropertyBoxContainer>;
}
