import React from 'react';
import { RichText } from './RichText';
import { Text, Spacer, AnchorButton, Wrapper, Section } from '@lendi/ui';
import styled from 'styled-components';

const CtaDiv = styled.div`
  background-color: ${({ theme }) => theme.color.background.surface};
  padding: 1.5rem;
  border-radius: 8px;
  text-align: center;
`;

const bulkContent = (
  <>
    <h1>H1 should they ever need it styled for blogs</h1>
    <p>
      Stamp duty, also known as transfer duty is a one-off, state-based tax so it varies according to the state or
      territory where you buy. Stamp duty is calculated based on the price you pay for your home. The good news for
      first home buyers is that — in addition to the <strong>First Home Owner Grant</strong> — you may be entitled to
      valuable savings on stamp duty in some states. Take a look at Aussie’s stamp duty calculator to know how much you
      will pay on your first home. Some lenders will let first home buyers borrow money to cover the cost of stamp duty.
      If this sounds like you, it might be a good idea to talk through options with your local Aussie Broker.{' '}
    </p>
    <h2>h2 Heading element from wysiwyg editor</h2>
    <p>
      Home values are being spurred on by record low interest rates plus a raft of government incentives, and a rapidly
      recovering economy.
    </p>
    <p>
      There’s another factor at work too. There simply aren’t enough homes listed for{' '}
      <a href="/">sale to meet demand</a>.
    </p>
    <h3>Some nested h3 heading</h3>
    <h4>Some nested h4 heading</h4>
    <p>
      In fact, the number of properties advertised for sale nationally is 26% lower today compared to a year ago. In
      this environment, buyers are in hot competition with each other, but you can give yourself a winning edge.
    </p>
    <CtaDiv>
      <Spacer ygap="16" yalign="center">
        <Text align="center" tag="h2" variant="title1">
          {`<Text>`} component tag h2
        </Text>
        <Text align="center" tag="p" variant="lead2">
          Only direct descendants of RichText get automatic styling. Use {`<Text>`} component for text styles, and{' '}
          {`<Spacer>`} for gaps.
        </Text>
        <Text align="center" tag="p" variant="lead2">
          Divs nested inside RichText will get 48px margin top and bottom though.
        </Text>
        <AnchorButton href="/" variant="primary">
          CTA button
        </AnchorButton>
      </Spacer>
    </CtaDiv>
    <p>
      One strategy is to have your home loan pre-approved, so you can act fast when the right property comes along. Your
      Aussie broker can explain how preapproval works, and start the ball rolling for you.
    </p>
    <p>
      One strategy is to have your home loan pre-approved, so you can act fast when the right property comes along. Your
      Aussie broker can explain how preapproval works, and start the ball rolling for you.
    </p>

    <h2>Headings before divs get 24px margin</h2>
    <div>
      <img
        style={{ maxWidth: '100%', width: '100%', display: 'block' }}
        src="https://www.aussie.com.au/content/dam/aussie/images/general/webtile736x324/insights_article_what-tax-deductions-can-property-investors-claim_736x324px.png"
        alt="shot of white townhouses on a sunny day"
      ></img>
    </div>
    <p>
      Aussie Brokers have experience in the finance industry and the home loan marketplace, but what really sets them
      apart from the rest?
    </p>
    <ul>
      <li>Their personalised approach to mortgage broking</li>
      <li>The unique loan comparison software they use, and</li>
      <li>Their training and professional qualifications</li>
    </ul>
    <p>
      <a href="https://www.aussie.com.au/why-aussie/our-experience.html">Find out more about how we work</a>, including
      our process and the benefits of using an Aussie Broker.{' '}
    </p>
    <h3>How is inflation influencing the cash rate?</h3>
    <p>
      If your home equity happens to fall below 20%, you may not be able to save by refinancing to a lower rate. This is
      because you’ll likely be subject to pay Lenders Mortgage Insurance (LMI) if you want to refinance your home loan
      with an LVR above 80%.
    </p>
    <p>
      As property prices continue to fall, it will likely become harder for homeowners who bought a property at the peak
      of the market to refinance. This is especially true for those who purchased a home with a low deposit (and
      therefore lower home equity) to begin with.&nbsp;
    </p>
    <p>
      What will this mean for{' '}
      <a href="https://www.aussie.com.au/your-goal/first-home-buyer.html" target="_blank" rel="noreferrer">
        prospective buyers
      </a>{' '}
      and current homeowners? We address the benefits and implications of falling property prices and how this could
      affect you.
    </p>
  </>
);

export const RichTextBlock = (args) => (
  <Wrapper>
    <Section>
      <RichText {...args}>{bulkContent}</RichText>
    </Section>
  </Wrapper>
);

export const RichTextBlockLarge = () => (
  <Wrapper>
    <Section>
      <RichText textSize="lg">{bulkContent}</RichText>
    </Section>
  </Wrapper>
);

export default RichTextBlock;