{title}

import React from 'react';
import styled from 'styled-components';

const Group = styled.section`
  display: grid;
  gap: ${({ theme }) => theme.spacing[5]};
`;

const Title = styled.h3`
  margin: 0;
  font-size: ${({ theme }) => theme.typography.fontSize.sm};
  font-weight: ${({ theme }) => theme.typography.fontWeight.semibold};
  color: ${({ theme }) => theme.colors.text.primary};
  text-align: start;
  letter-spacing: ${({ theme }) => theme.typography.letterSpacing.tight};
`;

const Body = styled.div`
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: ${({ theme }) => theme.form.fieldGap} ${({ theme }) => theme.spacing[6]};
  align-items: end;

  @media (max-width: 640px) {
    grid-template-columns: 1fr;
    gap: ${({ theme }) => theme.form.fieldGap};
  }
`;

export const DatePairRow = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: ${({ theme }) => theme.spacing[5]};
  grid-column: 1 / -1;

  @media (max-width: 640px) {
    grid-template-columns: 1fr;
    gap: ${({ theme }) => theme.form.fieldGap};
  }
`;

interface FilterGroupProps {
  title: string;
  children: React.ReactNode;
}

export const FilterGroup: React.FC<FilterGroupProps> = ({ title, children }) => (
  <Group>
    <Title>{title}</Title>
    <Body>{children}</Body>
  </Group>
);