import type { UiStatusItem } from "../types";

export interface FooterCellProps {
  item: UiStatusItem;
}

export function FooterCell({ item }: FooterCellProps) {
  const target = item.link?.external ? "_blank" : undefined;
  const rel = item.link?.external ? "noreferrer" : undefined;
  const content = (
    <>
      <span>{item.label}</span>
      <strong>{item.value}</strong>
    </>
  );

  if (item.link) {
    return (
      <a
        className="footer-cell"
        data-severity={item.severity || "neutral"}
        data-model-id={item.id}
        href={item.link.href}
        target={target}
        rel={rel}
        aria-label={item.link.label}
      >
        {content}
      </a>
    );
  }

  return (
    <div
      className="footer-cell"
      data-severity={item.severity || "neutral"}
      data-model-id={item.id}
    >
      {content}
    </div>
  );
}