import React from 'react';
import { clsx } from 'clsx';
import Badge from './Badge';
import { Text } from './Typography';

export interface ActivityCardProps {
  description: string;
  timestamp: string | Date;
  type?: string;
  icon?: React.ReactNode;
  onClick?: () => void;
  className?: string;
}

/**
 * ActivityCard component for displaying activity items in lists
 */
export const ActivityCard: React.FC<ActivityCardProps> = ({
  description,
  timestamp,
  type,
  icon,
  onClick,
  className,
}) => {
  const formattedDate =
    timestamp instanceof Date
      ? timestamp.toLocaleDateString()
      : new Date(timestamp).toLocaleDateString();

  return (
    <div
      className={clsx(
        'flex items-start gap-3 p-3 rounded-lg border bg-card/50 hover:bg-card transition-colors',
        onClick && 'cursor-pointer',
        className
      )}
      onClick={onClick}
    >
      {icon || <div className="w-2 h-2 rounded-full bg-primary mt-2 shrink-0" />}
      <div className="flex-1 min-w-0">
        <Text variant="small" className="font-medium">
          {description}
        </Text>
        <Text variant="muted" className="text-xs mt-0.5">
          {formattedDate}
        </Text>
      </div>
      {type && (
        <Badge variant="outline" className="text-xs shrink-0">
          {type}
        </Badge>
      )}
    </div>
  );
};