import React from 'react';
import { List, ListItem } from '@digigov/ui/content/List';
import { ErrorSummary } from '@digigov/ui/feedback/ErrorSummary';
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';

export const ErrorGroupLinkedToInput = (_: any) => (
  <div>
    <ErrorSummary variant="error-group">
      <Heading size="md">Τα παρακάτω πεδία της φόρμας ειναι λάθος.</Heading>
      <List listStyle="bullet">
        <ListItem>
          <b>Όνομα επιχείρησης:</b>{' '}
          <Link href="#business-name">
            Πρέπει να συμπληρώσετε το όνομα της επιχείρησης
          </Link>
        </ListItem>
        <ListItem>
          <b>Διεύθυνση επιχείρησης:</b>{' '}
          <Link href="#address-name">
            Πρέπει να συμπληρώσετε τη διεύθυνση της επιχείρησης
          </Link>
        </ListItem>
      </List>
    </ErrorSummary>
    <FieldContainer error>
      <LabelContainer>
        <LabelTitle size="md">Όνομα επιχείρησης</LabelTitle>
        <Hint>Ποιο είναι το όνομα της επιχείρησης;</Hint>
        <TextInput error name="inputext" id="business-name"></TextInput>
      </LabelContainer>
    </FieldContainer>
    <FieldContainer error>
      <LabelContainer>
        <LabelTitle size="md">Διεύθυνση επιχείρησης</LabelTitle>
        <Hint>Ποια είναι η διεύθυνση της επιχείρησης;</Hint>
        <TextInput error name="inputext" id="business-address"></TextInput>
      </LabelContainer>
    </FieldContainer>
  </div>
);

export default ErrorGroupLinkedToInput;