import React from 'react';
import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
import { ErrorMessage } from '@digigov/ui/form/ErrorMessage';
import { FieldContainer } from '@digigov/ui/form/FieldContainer';
import { LabelContainer, LabelTitle } from '@digigov/ui/form/LabelContainer';
import { TextInput } from '@digigov/ui/form/TextInput';
import { Link } from '@digigov/ui/navigation/Link';
import { Heading } from '@digigov/ui/typography/Heading';
import { Hint } from '@digigov/ui/typography/Hint';
import { VisuallyHidden } from '@digigov/ui/utils/VisuallyHidden';

export const LinkedToInput = (_: any) => (
  <div>
    <ErrorSummary>
      <Heading size="sm">Υπήρξε κάποιο πρόβλημα</Heading>
      <Link href="#business-name">
        Πρέπει να συμπληρώσετε το όνομα επιχείρησης
      </Link>
    </ErrorSummary>
    <FieldContainer error>
      <LabelContainer>
        <LabelTitle size="md">Όνομα επιχείρησης</LabelTitle>
        <Hint>Ποιο είναι το όνομα της επιχείρησης;</Hint>
        <ErrorMessage>
          <VisuallyHidden>Λάθος:</VisuallyHidden>Πρέπει να συμπληρώσετε το
          πεδίο.
        </ErrorMessage>
        <TextInput error name="inputext" id="business-name"></TextInput>
      </LabelContainer>
    </FieldContainer>
  </div>
);

export default LinkedToInput;