import { LucideIcon } from 'lucide-react';
import { ReactNode } from 'react';
import { Box } from './Box';
import { Icon } from './Icon';
import { Text } from './Text';

export interface AccountItemProps {
  icon: LucideIcon;
  title: string;
  description: string;
  action?: ReactNode;
  intent?: 'primary' | 'telemetry' | 'success' | 'low';
}

export const AccountItem = ({ 
  icon, 
  title, 
  description, 
  action,
  intent = 'low'
}: AccountItemProps) => {
  return (
    <Box display="flex" alignItems="center" justifyContent="between" paddingY={4} style={{ borderTop: '1px solid var(--ui-color-border-muted)' }}>
      <Box display="flex" alignItems="center" gap={3}>
        <Box padding={2} rounded="md" bg="var(--ui-color-bg-surface-muted)">
          <Icon icon={icon} size={5} intent={intent} />
        </Box>
        <Box>
          <Text weight="bold" size="sm" variant="high">{title}</Text>
          <Text size="xs" variant="low">{description}</Text>
        </Box>
      </Box>
      {action && (
        <Box>
          {action}
        </Box>
      )}
    </Box>
  );
};