import React from 'react';
import doc from './doc.mdx?raw';

import { Masthead, MastheadBody } from '@digigov/ui/app/Masthead';
import { CallToAction } from '@digigov/ui/form/Button/CallToAction';
import { Container } from '@digigov/ui/layouts/Basic/Container';
import { Main } from '@digigov/ui/layouts/Basic/Main';
import { Heading } from '@digigov/ui/typography/Heading';
import { Hint } from '@digigov/ui/typography/Hint';

export default {
  title: 'Digigov UI/app/Masthead',
  description:
    'You can use the masthead at the top of the first page of a GOV.GR service, not at internal pages.',
  link: 'https://guide.services.gov.gr/docs/components/masthead',
  defaultWidth: 'lg',
  component: Masthead,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'Masthead',
};

export const WithControls = {
  render: (args) => {
    return (
      <Masthead color={args.color}>
        <Container>
          <Main as="div">
            <Heading>Σχεδιάστε την υπηρεσία σας, με το στυλ του GOV.GR</Heading>
            <MastheadBody>
              Χρησιμοποιείστε αυτόν τον οδηγό ώστε να φτιάξετε μια υπηρεσία
              συνεπή στα πρότυπα του GOV.GR. Αποκτήστε γνώση από την έρευνα και
              την εμπειρία άλλων ομάδων και αποφύγετε την επανάληψη εργασιών που
              έχουν ήδη γίνει.
            </MastheadBody>
            {args.showHint && <Hint>Τελευταία ενημέρωση: 08/12/2021</Hint>}
            <CallToAction href="#">Ξεκινήστε εδώ</CallToAction>
          </Main>
        </Container>
      </Masthead>
    );
  },
  args: {
    color: 'primary',
    showHint: false,
  },
  argTypes: {
    color: {
      control: {
        type: 'inline-radio',
      },
      options: ['primary', 'secondary'],
    },
    showHint: {
      control: 'boolean',
    },
  },
  parameters: {
    controls: { exclude: ['ref'] },
  },
};

export { Default } from '@digigov/ui/app/Masthead/__stories__/Default';
export { Secondary } from '@digigov/ui/app/Masthead/__stories__/Secondary';
export { WithLogo } from '@digigov/ui/app/Masthead/__stories__/WithLogo';
export { WithElements } from '@digigov/ui/app/Masthead/__stories__/WithElements';