import Stack from '@material-hu/mui/Stack';

import { type Goal } from 'src/pages/dashboard/goals/types';

import ProgressBar from '../Goal/ProgressBar';

type GoalsSectionProps = {
  goals: Goal[];
  canViewGoalDetails: boolean;
};

const GoalsSection = ({ goals, canViewGoalDetails }: GoalsSectionProps) => {
  if (!goals || goals.length === 0) return null;

  return (
    <Stack
      sx={{
        flexDirection: 'column',
        gap: 2,
        width: '100%',
      }}
    >
      {goals.map((goal, idx) => (
        <ProgressBar
          key={goal.id || idx}
          canViewGoalDetails={canViewGoalDetails}
          goal={goal}
        />
      ))}
    </Stack>
  );
};

export default GoalsSection;