{title}

import React, { ReactNode } from 'react';
import styled from 'styled-components';

export interface PageSectionProps {
  title?: ReactNode;
  overline?: ReactNode;
  description?: ReactNode;
  actions?: ReactNode;
  children: ReactNode;
}

const Section = styled.section`
  margin: 0;
`;

const SectionHeader = styled.div`
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: ${({ theme }) => theme.spacing[4]};
  margin-bottom: ${({ theme }) => theme.spacing[5]};
  flex-wrap: wrap;
`;

const Overline = styled.p`
  margin: 0 0 ${({ theme }) => theme.spacing[1]};
  font-size: 0.6875rem;
  font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
  letter-spacing: ${({ theme }) => theme.typography.letterSpacing.widest};
  text-transform: uppercase;
  color: ${({ theme }) => theme.colors.text.tertiary};
  text-align: start;
`;

const Title = styled.h2`
  margin: 0;
  font-family: ${({ theme }) => theme.typography.fontFamily.headline};
  font-size: ${({ theme }) => theme.typography.fontSize.lg};
  font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
  letter-spacing: ${({ theme }) => theme.typography.letterSpacing.tight};
  line-height: ${({ theme }) => theme.typography.lineHeight.heading};
  color: ${({ theme }) => theme.colors.text.primary};
  text-align: start;
`;

const Description = styled.p`
  margin: ${({ theme }) => theme.spacing[2]} 0 0;
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  color: ${({ theme }) => theme.colors.text.secondary};
  text-align: start;
  max-width: 40rem;
`;

const Actions = styled.div`
  display: flex;
  gap: ${({ theme }) => theme.spacing[3]};
  flex-shrink: 0;
`;

const Body = styled.div`
  display: flex;
  flex-direction: column;
  gap: ${({ theme }) => theme.layout.cardGap};
`;

export const PageSection: React.FC<PageSectionProps> = ({
  title,
  overline,
  description,
  actions,
  children,
}) => (
  <Section>
    {(title || overline || description || actions) && (
      <SectionHeader>
        <div>
          {overline && <Overline>{overline}</Overline>}
          {title && <Title>{title}</Title>}
          {description && <Description>{description}</Description>}
        </div>
        {actions && <Actions>{actions}</Actions>}
      </SectionHeader>
    )}
    <Body>{children}</Body>
  </Section>
);