import {useTranslation} from 'react-i18next';
import {TrendingDown} from 'lucide-react';

import StatsSection from './StatsSection.jsx';
import ChartPicker from './ChartPicker.jsx';
import PileTrend from './PileTrend.jsx';

/**
 * @param chart LINE or BARS
 * @param onChart `(form)`: shows the picker
 */
export default function TrendStats({trend, chart = 'LINE', onChart}) {
    const {t} = useTranslation();
    return (
        <StatsSection title={t('STATS.TREND.TITLE')} icon={TrendingDown}
                      action={onChart && <ChartPicker group="TREND" value={chart} onChange={onChart}/>}>
            <PileTrend trend={trend} chart={chart}/>
        </StatsSection>
    );
}