import {MixedImage} from '../ui/images/mixed-image';
import clsx from 'clsx';
import React, {JSXElementConstructor} from 'react';
import {
  DatabaseNotification,
  DatabaseNotificationLine,
} from './database-notification';
import {FormattedRelativeTime} from '@common/i18n/formatted-relative-time';

interface LineProps {
  notification: DatabaseNotification;
  line: DatabaseNotificationLine;
  index: number;
  iconRenderer?: JSXElementConstructor<{icon: string}>;
}

export function Line({notification, line, index, iconRenderer}: LineProps) {
  const isPrimary = line.type === 'primary' || index === 0;
  const Icon = iconRenderer || DefaultIconRenderer;
  const Element = line.action ? 'a' : 'div';

  return (
    <>
      <Element
        key={index}
        className={clsx(
          'flex items-center gap-8',
          line.action && 'hover:underline',
          isPrimary
            ? 'text-sm mnarktext-main whitespace-nowrap'
            : 'text-xs text-muted mt-6'
        )}
        href={line.action?.action}
        title={line.action?.label}
      >
        {line.icon && <Icon icon={line.icon} />}
        <div
          className="overflow-hidden text-ellipsis"
          dangerouslySetInnerHTML={{__html: line.content}}
        />
      </Element>
      {index === 0 && (
        <time className="text-xs text-muted">
          <FormattedRelativeTime date={notification.created_at} />
        </time>
      )}
    </>
  );
}

interface DefaultIconRendererProps {
  icon: string;
}
function DefaultIconRenderer({icon}: DefaultIconRendererProps) {
  return <MixedImage src={icon} />;
}