import React from 'react';

import { FieldContainer } from '@digigov/ui/form/FieldContainer';
import { LabelContainer } from '@digigov/ui/form/LabelContainer';
import {
  SelectContainer,
  SelectOption,
} from '@digigov/ui/form/SelectContainer';
import { Hint } from '@digigov/ui/typography';

export const WithHint = (_: any) => (
  <FieldContainer>
    <LabelContainer>
      Ταξινόμηση
      <Hint id="select-hint">
        Τα αποτελέσματα θα εμφανιστούν με βάση την ταξινόμηση.
      </Hint>
      <SelectContainer
        name="select-list"
        aria-label="ταξινόμηση"
        aria-describedby="select-hint"
      >
        <SelectOption value="dim">Δημοφιλή</SelectOption>
        <SelectOption value="kat">Πρόσφατα</SelectOption>
        <SelectOption value="kat">Περισσότερες προβολές</SelectOption>
        <SelectOption value="kat">Περισσότερα σχόλια</SelectOption>
      </SelectContainer>
    </LabelContainer>
  </FieldContainer>
);

export default WithHint;