import './style.scss';
import 'components/Sections/Reviews/styles.scss'

import Header from 'Layout/Header';
import Footer from 'Layout/Footer';
import Label from 'components/Label';
import Button from 'components/common/Buttons';
import TrastpilotLogo from 'components/TrastLogo';
import TrastpilotStars from 'components/TrastpilotStars';
import LinkItem from 'components/common/Link';
import { data as product } from 'components/Sections/OurProducts/mockData.js'
import ProductCard from 'components/ProductCard';

// TO DO
// Create map for elements

const UIKit = () => {
    return (<div className='ui-kit'>
        <section>
            <h2>Header</h2>
            <Header />
        </section>

        <section>
            <h2>Footer</h2>
            <Footer />
        </section>

        <section>
            <h2>Label</h2>
            <div className='--margin-bottom'>
                <div>
                    Type: green (default)
                </div>
                <Label text={"Our label"} />

            </div>
            <div>
                Type: outline
            </div>
            <div className='--background-purple'>

                <Label text={"Our label"} type='outline' />

            </div>
        </section>

        <section>
            <h2>Buttons</h2>
            <div className='--flex-container'>
                <div>
                    Size: S
                    <Button text={"Try Now"} size='S' />
                    Size: M (default)
                    <Button text={"Try Now"} size='M' />
                    Size: L
                    <Button text={"Try Now"} size='L' />


                </div>
                <div>
                    Size: S
                    <Button text={"Try Now"} size='S' hasArrow={false} />
                    Size: M (default)
                    <Button text={"Try Now"} size='M' hasArrow={false} />
                    Size: L
                    <Button text={"Try Now"} size='L' hasArrow={false} />


                </div>
                <div>
                    Size: S
                    <Button text={"Create an account"} size='S' type={"white"} />
                    Size: M (default)
                    <Button text={"Create an account"} size='M' type={"white"} />
                    Size: L
                    <Button text={"Create an account"} size='L' type={"white"} />
                </div>
                <div>
                    Size: S
                    <Button text={"View documentation"} size='S' type={"outline"} />
                    Size: M (default)
                    <Button text={"View documentation"} size='M' type={"outline"} />
                    Size: L
                    <Button text={"View documentation"} size='L' type={"outline"} />
                </div>

            </div>
        </section>

        <section>
            <h2>Link</h2>
            <LinkItem text={"Text"} />
        </section>

        <section>
            <h2>Trustpilot</h2>
            <div className='--margin-bottom'>
                Size: M (default)
                <TrastpilotLogo />
            </div>
            <div className='--margin-bottom'>
                Size: L
                <TrastpilotLogo size='L' />
            </div>
            <div className='--margin-bottom'>
                Size: M (default)
                <TrastpilotStars />
            </div>
            <div className='--margin-bottom'>
                Size: L
                <TrastpilotStars size='L' />
            </div>
        </section>

        <section>
            <h2>Product Card</h2>
            <div className='--width-424'>
                < ProductCard product={product.products[0]} />
            </div>
        </section>
    </div>);
}

export default UIKit;

• [F] index.jsx
  Delete
• [F] style.scss
  Delete