import React from 'react';
import { SBox } from '../../../common/s-components/layout/s-box';
// import { TVendor } from '../../../common/types';
import { SCardTitle } from '../../s-components/s-card-title';
import { TTracklistsCardsDataResItem } from '../../types';
import { BarGraph } from './bar-graph';

type TProps = TTracklistsCardsDataResItem & {
  // vendor: TVendor;
};

export const Card: React.FC<TProps> = props => {
  const { title, value, colors } = props;
  return (
    <>
      <SBox py={14} px={16} height={80} bg="eastBay" borderRadius={8}>
        <SCardTitle>{title}</SCardTitle>
        <BarGraph value={value} colors={colors} />
      </SBox>
    </>
  );
};