import React from 'react';
import { SBox } from '../../common/s-components/layout/s-box';
import { SGradientCard } from '../../common/s-components/s-gradient-card';
import { BarGraphLine } from './bar-graph-line';
import { TFgBgColors, TItemColorized } from '../types';

type TProps = {
  card: TItemColorized<TFgBgColors>[];
  total: number;
  colors: TFgBgColors;
};

export const ByAgeCard: React.FC<TProps> = props => {
  const { card, total, colors } = props;

  return (
    <SBox
      testID="age-card"
      width={283}
      height={140}
      borderRadius={8}
      pt={7}
      px={16}
      pb={12}
      mr={16}
      bg={colors.bg}
    >
      <SGradientCard
        width={283}
        height={140}
        colors={colors.fg}
        borderRadius={8}
      />
      {card.map(item => (
        <BarGraphLine
          key={item.id}
          item={item}
          total={total}
          labelVariant="bold"
        />
      ))}
    </SBox>
  );
};