import { Card } from '@/see-log/aesthetics/Card';
import type { Nutrition, NutritionDisplayMode, NutritionSortMode } from '@/types/nutrition';
import { NutrientBreakdown } from './NutrientBreakdown';

type Props = {
  consumed: Nutrition;
  targets: Nutrition;
  displayMode: NutritionDisplayMode;
  sortMode: NutritionSortMode;
  onChangeDisplayMode: (mode: NutritionDisplayMode) => void;
  onChangeSortMode: (mode: NutritionSortMode) => void;
};

export function NutrientBreakdownCard({
  consumed,
  targets,
  displayMode,
  sortMode,
  onChangeDisplayMode,
  onChangeSortMode,
}: Props) {
  return (
    <Card>
      <NutrientBreakdown
        consumed={consumed}
        targets={targets}
        displayMode={displayMode}
        sortMode={sortMode}
        onChangeDisplayMode={onChangeDisplayMode}
        onChangeSortMode={onChangeSortMode}
      />
    </Card>
  );
}