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


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

interface PortfolioProps{
    showAll?: boolean
}

const Portfolio = ({ showAll = false }: PortfolioProps) => {

    const displayportfolio = showAll ? projects : projects.slice(0, 3) ;

    return (
        <>
            <Container>
                <Row className="d-flex flex-wrap">
                    {displayportfolio.map((itemslist: ProjectItem, index: number) => {
                        return (
                            <Col lg={4} md={4}>
                                <div className="single-projects-box">
                                    <Link href={itemslist.url} target="_blank" rel="noopener noreferrer">
                                        <div className="image">
                                            <Image
                                            src={itemslist.img}
                                            alt="image"
                                            width={750}
                                            height={600}
                                            />
                                        </div>
                                        <div className="content">
                                            <h3>
                                                {itemslist.title}
                                            </h3>
                                        </div>
                                    </Link>
                                </div>
                            </Col>
                        )
                    })}
                </Row>
            </Container>
        </>
    )
}

export default Portfolio;