// @design-system: domain/ActivityRow

import type { ReactNode } from 'react';
import { cn } from '@/lib/cn';
import { useLocale } from '@/lib/i18n/react';
import { formatRelative } from '@/lib/format';

/** Tone options for the colored dot indicator. */
export type ActivityTone = 'success' | 'warning' | 'danger' | 'neutral';

const dotClasses: Record<ActivityTone, string> = {
  success: 'bg-success-500',
  warning: 'bg-warning-500',
  danger: 'bg-danger-500',
  neutral: 'bg-neutral-400',
};

/** Props for ActivityRow */
export interface ActivityRowProps {
  /** Row title. */
  title: string;
  /** Subtitle / detail text. */
  sub?: string;
  /** Tone for the left dot. @default 'neutral' */
  tone?: ActivityTone;
  /** Optional action link element. */
  action?: ReactNode;
  /** ISO timestamp for the relative time shown on the end. */
  timestamp?: string;
  /** Optional end-aligned content (e.g. amount, status pill). Absorbed from ListRow. */
  rightSlot?: ReactNode;
  /** Additional class names. */
  className?: string;
}

/**
 * ActivityRow - colored dot + title + sub + optional action + time.
 * Composed into a vertical list on the vendor Notifications tab (FDS §5.2).
 *
 * @example
 * ```tsx
 * <ActivityRow
 *   tone="success"
 *   title={t('new_purchase')}
 *   sub="Avi Cohen · ₪45"
 *   timestamp={notification.createdAt}
 * />
 * ```
 */
export function ActivityRow({
  title,
  sub,
  tone = 'neutral',
  action,
  timestamp,
  rightSlot,
  className,
}: ActivityRowProps) {
  const { locale } = useLocale();

  return (
    <div className={cn('flex items-start gap-3 py-3', className)}>
      {/* Colored dot indicator */}
      <span
        className={cn('mt-1 h-2.5 w-2.5 shrink-0 rounded-full', dotClasses[tone])}
        aria-hidden="true"
      />

      {/* Content */}
      <div className="min-w-0 flex-1">
        <p className="text-text-primary text-sm font-medium">{title}</p>
        {sub && <p className="text-text-secondary mt-0.5 text-xs">{sub}</p>}
        {action && <div className="mt-1">{action}</div>}
      </div>

      {/* Timestamp */}
      {timestamp && (
        <time dateTime={timestamp} className="text-text-muted shrink-0 text-xs" title={timestamp}>
          {formatRelative(timestamp, locale)}
        </time>
      )}

      {/* Right slot — end-aligned optional content (amount, status pill, etc.) */}
      {rightSlot && <div className="ms-auto shrink-0">{rightSlot}</div>}
    </div>
  );
}