'use client'

import React, { useState } from 'react';

import style from './Wrapper.module.scss';

import Gallery from './Gallery';
import Toggle from './Toggle';
import { GalleryData } from '@/meta/data';
import NoData from './NoData';

interface Props {
    data: GalleryData[]
    locale: string
    labels: {
        toggle: string
        noData: string
    }
}

const Wrapper: React.FC<Props> = (props) => {

    const { labels, locale, data } = props

    const [show, setShow] = useState<boolean>(false)

    return (
        <div className={style.resultsContainer}>
            {(data && data.length > 0) && <>
                <Toggle label={labels.toggle} handleClick={() => setShow(!show)} />
                <Gallery data={data} locale={locale} show={show} />
            </>}
            {(!data || data.length == 0) && <NoData msg={labels.noData}/>}
        </div>
    );
};

export default Wrapper;