import { useLokaliseTranslation } from 'src/utils/i18n';

import type { ConversationCategory } from '../../types/retention';
import { CategoryBadge } from '../CategoryBadge';
import { formatDuration } from '../../utils/formatters';
import { SidebarSection, DetailRow } from './SidebarWidgets';

type ConversationMetadataPanelProps = {
  id: number;
  category: ConversationCategory | null;
  durationSecs: number | null;
  previousSessionsCount: number;
};

export function ConversationMetadataPanel({
  id,
  category,
  durationSecs,
  previousSessionsCount,
}: ConversationMetadataPanelProps) {
  const { t } = useLokaliseTranslation('backoffice_only');

  return (
    <SidebarSection title={t('tali.metadata.title')}>
      <DetailRow
        label={t('tali.metadata.id')}
        value={`#${id}`}
      />
      <DetailRow label={t('tali.metadata.category')}>
        <CategoryBadge category={category} />
      </DetailRow>
      <DetailRow
        label={t('tali.metadata.duration')}
        value={formatDuration(durationSecs)}
      />
      <DetailRow
        label={t('tali.metadata.previous_sessions')}
        value={
          previousSessionsCount > 0
            ? String(previousSessionsCount)
            : t('tali.metadata.none')
        }
      />
    </SidebarSection>
  );
}