import type { UiServiceRow } from "../types";
import { IconGlyph } from "./IconGlyph";
import { StatusBadge } from "./StatusBadge";

export interface ServiceRowProps {
  service: UiServiceRow;
}

export function ServiceRow({ service }: ServiceRowProps) {
  const target = service.link?.external ? "_blank" : undefined;
  const rel = service.link?.external ? "noreferrer" : undefined;
  const content = (
    <>
      <IconGlyph name={service.icon} />
      <div className="service-row__main">
        <h3>{service.label}</h3>
        <p>{service.description}</p>
      </div>
      {service.detail ? (
        <StatusBadge label={service.detail} severity={service.severity} />
      ) : null}
    </>
  );

  if (service.link) {
    return (
      <a
        className="service-row"
        data-severity={service.severity}
        data-model-id={service.id}
        href={service.link.href}
        target={target}
        rel={rel}
        aria-label={service.link.label}
      >
        {content}
      </a>
    );
  }

  return (
    <article
      className="service-row"
      data-severity={service.severity}
      data-model-id={service.id}
    >
      {content}
    </article>
  );
}