import React from 'react';
import doc from './doc.mdx?raw';
import {
  PhaseBanner,
  PhaseBannerTag,
  PhaseBannerText,
} from '@digigov/ui/feedback/PhaseBanner';
import { Link } from '@digigov/ui/navigation/Link';

export default {
  title: 'Digigov UI/feedback/PhaseBanner',
  description:
    'Use the phase banner component to show users your service is still being worked on.',
  link: 'https://guide.services.gov.gr/docs/components/phase-banner',
  component: PhaseBanner,
  tags: ['autodocs'],
  markdown: doc,
  displayName: 'PhaseBanner',
};

export const WithControls = {
  render: (args) => {
    return (
      <PhaseBanner underline={args.underline}>
        <PhaseBannerTag>{args.tag}</PhaseBannerTag>
        <PhaseBannerText>
          Αυτή είναι μία νέα υπηρεσία – τα <Link href="#feedback">σχόλιά</Link>{' '}
          σας θα μας βοηθήσουν να τη βελτιώσουμε.
        </PhaseBannerText>
      </PhaseBanner>
    );
  },
  args: {
    underline: true,
    tag: 'ALPHA',
  },
  argTypes: {
    underline: {
      control: { type: 'boolean' },
    },
    tag: {
      control: { type: 'text' },
    },
  },
  parameters: {
    controls: { exclude: ['ref'] },
  },
};
export { Default } from '@digigov/ui/feedback/PhaseBanner/__stories__/Default';
export { Underlined } from '@digigov/ui/feedback/PhaseBanner/__stories__/Underlined';