import { Box, Heading } from 'components/common';
import { ErrorBoundary } from 'components/ErrorBoundary';
import { AttributesList } from 'components/analytics/AttributesList';

export const AttributesPanel = ({
  attributes,
  totalProfiles,
}: {
  attributes?: {
    id: string;
    label: string;
    value: number;
  }[];
  totalProfiles?: number;
}) => {
  return (
    <Box display="flex" column height="100%" overflow="hidden">
      <Box
        className="bg-white shadow1"
        flex="none"
        display="flex"
        align="center"
        height={44}
        paddingX={4}
      >
        <Heading>Data points</Heading>
      </Box>

      <Box
        className="customScroll"
        style={{ paddingBottom: 100 }}
        overflow="auto"
      >
        <ErrorBoundary>
          <AttributesList data={attributes} total={totalProfiles} />
        </ErrorBoundary>
      </Box>
    </Box>
  );
};