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

import { CatalogSortButton } from '@redocly/theme/components/Catalog/CatalogSortButton';
import { CatalogViewModeToggle } from '@redocly/theme/components/Catalog/CatalogViewModeToggle';
import { SortOption } from '@redocly/theme/core';
import { CatalogViewMode } from '@redocly/theme/core';

type CatalogMobileTopBarControlsProps = {
  setSortOption: (sortOption: SortOption | null) => void;
  sortOption: SortOption | null;
  viewMode: CatalogViewMode;
  setViewMode: (viewMode: CatalogViewMode) => void;
};

export function CatalogMobileTopBarControls({
  setSortOption,
  sortOption,
  viewMode,
  setViewMode,
}: CatalogMobileTopBarControlsProps): JSX.Element {
  return (
    <CatalogMobileTopBarControlsWrapper>
      <CatalogSortButton onSortChange={setSortOption} currentSort={sortOption} />
      <CatalogViewModeToggle viewMode={viewMode} onViewModeChange={setViewMode} />
    </CatalogMobileTopBarControlsWrapper>
  );
}

const CatalogMobileTopBarControlsWrapper = styled.div`
  display: flex;
  align-items: center;
  gap: var(--catalog-controls-wrapper-gap);
`;