Details

const PreviewEn = () => {
  return (
    <Details>
      <Details.Summary>
        Who can register in the Volunteer Register?
      </Details.Summary>
      <Details.Content>
        To be registered in the Volunteer Register, the organization must
        conduct voluntary activities. Only associations, foundations, and
        limited companies can be registered. The business cannot distribute
        funds to individuals. The business must have a board.
      </Details.Content>
    </Details>
  );
};

render(<PreviewEn />)

const InCardWithColorEn = () => {
  return (
    <>
      <Card data-color='brand3' data-variant='tinted'>
        <Details>
          <Details.Summary>
            How do I get assigned a hunter number?
          </Details.Summary>
          <Details.Content>
            You will automatically be assigned a hunter number and registered in
            the Hunter Register when you have passed the hunter's exam.
          </Details.Content>
        </Details>
        <Details>
          <Details.Summary>
            I have forgotten my hunter number. Where can I find it?
          </Details.Summary>
          <Details.Content>
            <Paragraph>
              You can find this by logging in to{' '}
              <Link href='https://minjegerside.brreg.no/'>My Page</Link>
            </Paragraph>
          </Details.Content>
        </Details>
      </Card>
      <br />
      <Card data-color='brand1'>
        <Details>
          <Details.Summary>Attachments</Details.Summary>
          <Details.Content>
            Attachment 1, attachment 2, attachment 3
          </Details.Content>
        </Details>
      </Card>
    </>
  );
};

render(<InCardWithColorEn />)

const Controlled = () => {
  const [open1, setOpen1] = useState(false);
  const [open2, setOpen2] = useState(false);
  const isOpen = [open1, open2].every(Boolean);
  const toggleOpen = () => {
    setOpen1(!isOpen);
    setOpen2(!isOpen);
  };

  return (
    <>
      <Button variant='tertiary' onClick={toggleOpen} data-size='sm'>
        {isOpen ? (
          <>
            <ChevronDownUpIcon aria-hidden />
            Close both
          </>
        ) : (
          <>
            <ChevronUpDownIcon aria-hidden />
            Open both
          </>
        )}
      </Button>
      <br />

      <Details open={open1} onToggle={() => setOpen1(!open1)}>
        <Details.Summary>Enkeltpersonforetak</Details.Summary>
        <Details.Content>
          Skal du starte for deg selv? Enkeltpersonforetak er ofte den enkleste
          måten å etablere bedrift på. Denne organisasjonsformen har både
          fordeler og ulemper. Det gir deg stor grad av frihet, men kan også gi
          betydelig risiko fordi du har personlig ansvar for økonomien.
        </Details.Content>
      </Details>
      <Details open={open2} onToggle={() => setOpen2(!open2)}>
        <Details.Summary>Aksjeselskap (AS)</Details.Summary>
        <Details.Content>
          Planlegger du å starte næringsvirksomhet alene eller sammen med andre?
          Innebærer næringsvirksomheten en økonomisk risiko? Vil du ha
          rettigheter som arbeidstaker og muligheten til at andre kan investere
          i selskapet ditt? Da kan aksjeselskap være en hensiktsmessig
          organisasjonsform.
        </Details.Content>
      </Details>
    </>
  );
};

render(<Controlled />)