import { ReactNode } from 'react';
import { Box } from './Box';
import { Surface } from './Surface';
import { Text } from './Text';

interface SummaryItemProps {
  title: string;
  subtitle?: string;
  rightContent?: ReactNode;
  onClick?: () => void;
}

export function SummaryItem({
  title,
  subtitle,
  rightContent,
  onClick,
}: SummaryItemProps) {
  return (
    <Surface
      variant="muted"
      padding={3}
      rounded="lg"
      onClick={onClick}
      style={{
        display: 'flex',
        alignItems: 'center',
        justifyContent: 'space-between',
        cursor: onClick ? 'pointer' : 'default',
      }}
    >
      <Box>
        <Text color="text-white" weight="medium" block>
          {title}
        </Text>
        {subtitle && (
          <Text size="xs" color="text-gray-500">
            {subtitle}
          </Text>
        )}
      </Box>
      {rightContent && (
        <Box>
          {rightContent}
        </Box>
      )}
    </Surface>
  );
}