import React from 'react';

import { Franco } from '../src';
import FrancoButton, {
  FrancoButtonProps,
} from '../src/Franco/components/FrancoButton/FrancoButton';

export default {
  title: 'FrancoBox',
  component: Franco,
  parameters: {
    layout: 'fullscreen',
    backgrounds: {
      default: 'App',
      values: [{ name: 'App', value: '#F2F4F8' }],
    },
  },
};

const Template = (args) => <Franco {...args} />;

export const Primary = Template.bind({});
Primary.args = {
  color: 'infoRed',
  type: 'plain',
  title: 'Nb. de colis',
  content: '26 Colis',
  labelContent: 'Min: 250€',
};

const meteoButton: FrancoButtonProps = {
  icon: '../images/icon-plus-black.svg',
  title: 'Météo',
  render: () => <div>Meteo</div>,
};

const eventsButton: FrancoButtonProps = {
  icon: '../images/icon-minus-black.svg',
  title: 'Évènements',
  render: () => <div>Events</div>,
};

export const WithButtons = Template.bind({});
WithButtons.args = {
  type: 'plain',
  title: 'CH HT:',
  content: '12 378 EUR',
  buttons: [
    {
      icon: meteoButton.icon,
      title: meteoButton.title,
      render: meteoButton.render,
    },
    {
      icon: eventsButton.icon,
      title: eventsButton.title,
      render: eventsButton.render,
    },
  ],
};