import React from "react";

import {

EuiHorizontalRule,

EuiPanel,

EuiTitle,

EuiBadge,

EuiSkeletonText,

EuiFlexGroup,

EuiFlexItem,

EuiSpacer,

} from "@elastic/eui";

import { useNavigate } from "react-router-dom";

import useFCOExploreSuggestions from "../hooks/useFCOExploreSuggestions";

const ExplorePanel = () => {

const { isLoading, isSuccess, data } = useFCOExploreSuggestions();

const navigate = useNavigate();

return (

<EuiPanel>

<EuiTitle size="xs">

<h3>Explore this Project</h3>

</EuiTitle>

<EuiHorizontalRule margin="xs" />

{isLoading && <EuiSkeletonText lines={3} />}

{isSuccess &&

data &&

data.map((suggestionGroup, i) => {

return (

<React.Fragment key={i}>

<EuiTitle size="xxs">

<h4>{suggestionGroup.title}</h4>

</EuiTitle>

<EuiFlexGroup wrap responsive={false} gutterSize="xs">

{suggestionGroup.items.map((item, j) => {

return (

<EuiFlexItem grow={false} key={j}>

<EuiBadge

color="primary"

onClick={() => {

navigate(item.link);

}}

onClickAriaLabel={item.label}

>

{item.name} ({item.count})

</EuiBadge>

</EuiFlexItem>

);

})}

</EuiFlexGroup>

<EuiSpacer size="s" />

</React.Fragment>

);

})}

</EuiPanel>

);

};

export default ExplorePanel;