import React from 'react';
import styled from 'styled-components';
import CTACard from './index';
import Button from '../Controls/Button';

const Wrapper = styled.div`
  max-width: 576px;
`;

export default {
  title: 'Core/CTACard',
  component: CTACard
};

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

export const Default = Template.bind({});
Default.args = {
  hasPaint: true,
  illustration: 'https://axeptio.imgix.net/2023/11/f3915abb-4630-45ac-bf2b-9486b91a91ef.png',
  title: 'Axeptio for individuals',
  description: 'Your consent experience is improved & your data secured when you visit one of our customers website.',
  cta: (
    <Button secondary size="large">
      I want to learn more
    </Button>
  )
};