import React from 'react';
import Link from "next/link";
import Image from "next/image";
import Col from 'react-bootstrap/Col';
import Row from 'react-bootstrap/Row';
import Container from 'react-bootstrap/Container';
import { projects } from './Projects';
import styles from "./Portfolio.module.css";


interface ProjectItem {
    img: string;
    title: string;
    url: string;
}


interface PortfolioProps {
    showAll?: boolean;
    random?: boolean;
}


const CaseStudy = ({
    showAll = false,
    random = false
}: PortfolioProps) => {


    const allProjects: ProjectItem[] = [
        ...projects.magento2,
        ...projects.shopify,
        ...projects.woocommerce,
    ];



    // Home page random 6
    if(random){

        const randomProjects = [...allProjects]
            .sort(() => Math.random() - 0.5)
            .slice(0,6);



        return (

            <Container>

                <Row className="d-flex flex-wrap">


                    {randomProjects.map((item,index)=>(


                        <Col
                            lg={4}
                            md={4}
                            sm={6}
                            key={index}
                        >


                            <div className={styles.singleProjectsBox}>


                                <Link
                                    href={item.url}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >


                                    <div className={styles.image}>

                                        <Image
                                            src={item.img}
                                            alt={`Screenshot of the ${item.title} website`}
                                            width={750}
                                            height={600}
                                        />

                                    </div>



                                    <div className={styles.content}>


                                        <h3>
                                            {item.title}
                                        </h3>


                                    </div>



                                </Link>


                            </div>


                        </Col>


                    ))}


                </Row>


            </Container>

        )

    }



    // Portfolio page category wise

    const categories = [

        {
            name:"Magento 2",
            key:"magento2",
            data:projects.magento2,
            color:"magento"
        },

        {
            name:"Shopify",
            key:"shopify",
            data:projects.shopify,
            color:"shopify"
        },

        {
            name:"WooCommerce / WordPress",
            key:"woocommerce",
            data:projects.woocommerce,
            color:"woocommerce"
        }

    ];



    return (

        <Container>


            {
            categories.map((category)=>(


                <div
                    className={styles.portfolioCategory}
                    key={category.key}
                >


                    <div className={styles.categoryHeader}>

                        <h2>
                            {category.name}
                        </h2>

                    </div>



                    <Row>


                    {
                    (showAll 
                    ? category.data 
                    : category.data.slice(0,3)
                    )
                    .map((item:ProjectItem,index:number)=>(


                        <Col
                            lg={4}
                            md={4}
                            sm={6}
                            key={index}
                        >


                            <div className={styles.singleProjectsBox}>


                                <Link
                                    href={item.url}
                                    target="_blank"
                                    rel="noopener noreferrer"
                                >


                                    <div className={styles.image}>


                                        <Image
                                            src={item.img}
                                            alt={`Screenshot of the ${item.title} website`}
                                            width={750}
                                            height={600}
                                        />


                                    </div>



                                    <div className={styles.content}>


                                        <span className={`${styles.tech} ${styles[category.color]}`}>

                                            {category.name}

                                        </span>


                                        <h3>
                                            {item.title}
                                        </h3>


                                    </div>



                                </Link>


                            </div>


                        </Col>


                    ))}


                    </Row>


                </div>


            ))}


        </Container>

    )

}


export default CaseStudy;