import styled, { AnyStyledComponent } from 'styled-components';

import { breakpoints } from '@/styles';
import { layoutMixins } from '@/styles/layoutMixins';

type ElementProps = {
  title: string;
  subtitle?: React.ReactNode;
  slotRight?: React.ReactNode;
};

type StyleProps = {
  className?: string;
};

export const ContentSectionHeader = ({
  title,
  subtitle,
  slotRight,
  className,
}: ElementProps & StyleProps) => (
  <Styled.ContentSectionHeader className={className}>
    <div>
      {title && <h3>{title}</h3>}
      {subtitle && <p>{subtitle}</p>}
    </div>
    {slotRight}
  </Styled.ContentSectionHeader>
);

const Styled: Record<string, AnyStyledComponent> = {};

Styled.ContentSectionHeader = styled.header<StyleProps>`
  ${layoutMixins.contentSectionDetached}

  ${layoutMixins.row}
  justify-content: space-between;

  --header-horizontal-padding: 1rem;

  padding: 1rem var(--header-horizontal-padding);

  > div {
    ${layoutMixins.column}
  }

  h3 {
    color: var(--color-text-2);
    font: var(--font-large-medium);
  }

  p {
    color: var(--color-text-0);
    font: var(--font-small-book);
    margin-top: 0.25rem;
  }

  @media ${breakpoints.tablet} {
    flex-wrap: wrap;
    --header-horizontal-padding: 1.25rem;
  }
`;