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

export type FilterOptionsProps = PropsWithChildren<{
  className?: string;
}>;

export function FilterOptions(props: FilterOptionsProps): JSX.Element {
  return <FilterOptionsComponent {...props} data-component-name="Filter/FilterOptions" />;
}

const FilterOptionsComponent = styled.div`
  padding: var(--filter-options-padding-vertical) var(--filter-options-padding-horizontal);
  display: flex;
  flex-direction: column;
  gap: var(--filter-options-gap);
`;