gridpilot.gg/apps/website/ui/ProfileCard.tsx

import { ReactNode } from 'react';
import { Card } from './Card';
import { Box } from './Box';

export interface ProfileCardProps {
  identity: ReactNode;
  stats?: ReactNode;
  actions?: ReactNode;
  variant?: 'default' | 'muted' | 'outline' | 'glass' | 'precision';
  onClick?: () => void;
  'data-testid'?: string;
}

export const ProfileCard = ({ identity, stats, actions, variant = 'default', onClick, 'data-testid': dataTestId }: ProfileCardProps) => {
  return (
    <Card
      variant={variant}
      padding="md"
      onClick={onClick}
      fullHeight
      data-testid={dataTestId as string}
    >
       <Box display="flex" justifyContent="between" alignItems="start" gap={4}>
         <Box flex={1} minWidth="0">
           {identity}
         </Box>
         {actions && (
           <Box flexShrink={0}>
             {actions}
           </Box>
         )}
       </Box>
       {stats && (
         <Box marginTop="auto" paddingTop={4} borderTop="1px solid var(--ui-color-border-muted)">
           {stats}
         </Box>
       )}
    </Card>
  );
};