"use client";

import Link from "next/link";
import { Icon } from "@/ds";
import { assetsStrings as s } from "./strings";

/**
 * Shared header for the account / manual-asset / lending detail pages: a
 * round back button + title, matching the row/typography language used
 * across the rest of the Assets feature.
 */
export function DetailHeader({ title }: { title: string }) {
  return (
    <header style={{ display: "flex", alignItems: "center", gap: 12 }}>
      <Link
        href="/assets"
        aria-label={s.common.back}
        style={{
          display: "grid",
          placeItems: "center",
          width: 36,
          height: 36,
          flexShrink: 0,
          borderRadius: 12,
          background: "var(--seed-color-bg-neutral-subtle, #eef0f2)",
          color: "var(--seed-color-fg-neutral)",
        }}
      >
        <Icon name="chevron-left" size={20} />
      </Link>
      <h1
        style={{
          margin: 0,
          fontSize: 18,
          fontWeight: 700,
          flex: 1,
          minWidth: 0,
          overflow: "hidden",
          textOverflow: "ellipsis",
          whiteSpace: "nowrap",
        }}
      >
        {title}
      </h1>
    </header>
  );
}