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';
  onClick?: () => void;
}

export const ProfileCard = ({ identity, stats, actions, variant = 'default', onClick }: ProfileCardProps) => {
  return (
    <Card 
      variant={variant} 
      padding="md" 
      onClick={onClick} 
      className="h-full flex flex-col gap-6 transition-all duration-200 hover:border-[var(--ui-color-border-bright)]"
    >
       <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>
  );
};
