import './bottom-details.component.scss';
import IssueTypesComponent from './components/issue-types/issue-types.component';
import LocationsComponent from './components/locations/locations.component';
import PersonasComponent from './components/personas/personas.component';
import TopChallengesComponent from './components/top-challenges/top-challenges.component';
import TopOpportunitiesComponent from './components/top-opportunities/top-opportunities.component';
import IssueCategoriesComponent from './components/issue-categories/issue-categories.component';
import { PersonaProps } from './components/personas/persona.props';
import { Persona } from './components/personas/persona.entity';
const BottomDetailsComponent = (props: any) => {
    const onPersonaChanged = (persona: Persona) => {
        if (props.onPersonaChanged) {
            props.onPersonaChanged(persona);
        }
    };
    const personaProps: PersonaProps = {
        filters: props.filters,
        onPersonaChanged,
    };
    return (
        <div className={'bottom-details-wrapper'}>
            <div className={'bg persona'}>
                <PersonasComponent {...personaProps} />
            </div>
            <div className={'bg location'}>
                <LocationsComponent {...props} />
            </div>

            <div className={'bg top-challenges'}>
                <TopChallengesComponent {...props} />
            </div>

            <div className={'bg issue-categories'}>
                <IssueCategoriesComponent {...props} />
            </div>

            {/*<div className={'bg issue-types'}>*/}
            {/*    <IssueTypesComponent {...props} />*/}
            {/*</div>*/}
            {/*<div className={'bg top-opportunities'}>*/}
            {/*    <TopOpportunitiesComponent {...props} />*/}
            {/*</div>*/}
        </div>
    );
};
export default BottomDetailsComponent;