import React from 'react';
import { FieldContainer } from '@digigov/ui/form/FieldContainer';
import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
import { TextInput } from '@digigov/ui/form/TextInput';

export const FixedWidths = (_: any) => (
  <div>
    <FieldContainer>
      <LabelContainer>
        <LabelTitle size="sm">Πεδίο 20 χαρακτήρων</LabelTitle>
        <TextInput name="inputext" maxWidth={'20-char'}></TextInput>
      </LabelContainer>
    </FieldContainer>
    <FieldContainer>
      <LabelContainer>
        <LabelTitle size="sm">Πεδίο 10 χαρακτήρων</LabelTitle>
        <TextInput name="inputext" maxWidth={'10-char'}></TextInput>
      </LabelContainer>
    </FieldContainer>
    <FieldContainer>
      <LabelContainer>
        <LabelTitle size="sm">Πεδίο 5 χαρακτήρων</LabelTitle>
        <TextInput name="inputext" maxWidth={'5-char'}></TextInput>
      </LabelContainer>
    </FieldContainer>
    <FieldContainer>
      <LabelContainer>
        <LabelTitle size="sm">Πεδίο 4 χαρακτήρων</LabelTitle>
        <TextInput name="inputext" maxWidth={'4-char'}></TextInput>
      </LabelContainer>
    </FieldContainer>
    <FieldContainer>
      <LabelContainer>
        <LabelTitle size="sm">Πεδίο 3 χαρακτήρων</LabelTitle>
        <TextInput name="inputext" maxWidth={'3-char'}></TextInput>
      </LabelContainer>
    </FieldContainer>
    <FieldContainer>
      <LabelContainer>
        <LabelTitle size="sm">Πεδίο 2 χαρακτήρων</LabelTitle>
        <TextInput name="inputext" maxWidth={'2-char'}></TextInput>
      </LabelContainer>
    </FieldContainer>
  </div>
);

export default FixedWidths;