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

export interface ListItemProps {
  children: ReactNode;
  onClick?: () => void;
}

export const ListItem = ({ children, onClick }: ListItemProps) => {
  return (
    <Card 
      variant="dark" 
      onClick={onClick} 
      style={{ cursor: onClick ? 'pointer' : 'default' }}
    >
      <Box display="flex" alignItems="center" justifyContent="between" gap={4}>
        {children}
      </Box>
    </Card>
  );
};

export interface ListItemInfoProps {
  title: string;
  description?: string;
  meta?: ReactNode;
}

export const ListItemInfo = ({ title, description, meta }: ListItemInfoProps) => (
  <Box flex={1} minWidth="0">
    <Text weight="bold" variant="high" block truncate>{title}</Text>
    {description && (
      <Text size="xs" variant="low" block marginTop={1} lineClamp={2}>
        {description}
      </Text>
    )}
    {meta && <Box marginTop={2}>{meta}</Box>}
  </Box>
);

export interface ListItemActionsProps {
  children: ReactNode;
}

export const ListItemActions = ({ children }: ListItemActionsProps) => (
  <Box display="flex" alignItems="center" gap={2} flexShrink={0}>
    {children}
  </Box>
);