1"use client";
2
3import { useState } from "react";
4import { RenderIcon, Tooltip } from "@versable-git/ui";
5
6// The two shipping faces of one trigger: an icon-led button that opens a
7// preview, and a mono SKU link whose plain click peeks while modifier-clicks
8// and the trailing glyph still navigate. Clicking any trigger sets the
9// opened part below, standing in for the real preview host both apps mount.
10function PartName({
11  partNumber,
12  disabled,
13  onOpen,
14}: {
15  partNumber: string;
16  disabled?: boolean;
17  onOpen?: (id: string) => void;
18}) {
19  return (
20    <Tooltip content={disabled ? "No preview available for this part" : `Preview Part ${partNumber}`}>
21      <button
22        type="button"
23        disabled={disabled}
24        className="group hover:text-primary focus-visible:ring-primary/50 inline-flex cursor-pointer items-center gap-1 rounded-sm whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-40"
25        onClick={() => onOpen?.(partNumber)}
26      >
27        <RenderIcon
28          Icon="Settings"
29          size={12}
30          className="text-base-content/30 group-hover:text-primary shrink-0 transition-colors"
31        />
32        {partNumber}
33      </button>
34    </Tooltip>
35  );
36}
37
38function ProductLink({ sku, disabled, onOpen }: { sku: string; disabled?: boolean; onOpen?: (id: string) => void }) {
39  return (
40    <span className="inline-flex items-center gap-1">
41      <Tooltip content={disabled ? "No preview available for this SKU" : "Open preview"} placement="top">
42        <a
43          href="#part"
44          aria-disabled={disabled}
45          className={
46            disabled
47              ? "text-base-content/30 pointer-events-none font-mono text-sm"
48              : "text-primary font-mono text-sm hover:underline"
49          }
50          onClick={(e) => {
51            e.preventDefault();
52            onOpen?.(sku);
53          }}
54        >
55          {sku}
56        </a>
57      </Tooltip>
58      {!disabled && (
59        <a href="#part" title="Open full page" className="text-base-content/45 hover:text-primary text-xs">
60          ↗
61        </a>
62      )}
63    </span>
64  );
65}
66
67export function PartIdentity() {
68  const [opened, setOpened] = useState<string | null>(null);
69
70  return (
71    <div className="flex flex-col gap-6">
72      <div className="flex flex-col gap-2">
73        <span className="text-base-content/45 text-xs font-medium tracking-wide uppercase">Icon-led preview button</span>
74        <div className="flex gap-6 text-sm">
75          <PartName partNumber="BRK-2214" onOpen={setOpened} />
76          <PartName partNumber="LGT-0087" onOpen={setOpened} />
77        </div>
78      </div>
79      <div className="flex flex-col gap-2">
80        <span className="text-base-content/45 text-xs font-medium tracking-wide uppercase">Mono SKU link, peek on click</span>
81        <div className="flex gap-6">
82          <ProductLink sku="AC-83001" onOpen={setOpened} />
83          <ProductLink sku="CH-11940" onOpen={setOpened} />
84        </div>
85      </div>
86      <div className="flex flex-col gap-2">
87        <span className="text-base-content/45 text-xs font-medium tracking-wide uppercase">Both faces, side by side</span>
88        <div className="flex items-center gap-6 text-sm">
89          <PartName partNumber="FLT-5502" onOpen={setOpened} />
90          <ProductLink sku="FLT-5502" onOpen={setOpened} />
91        </div>
92      </div>
93      <div className="flex flex-col gap-2">
94        <span className="text-base-content/45 text-xs font-medium tracking-wide uppercase">Disabled, no preview</span>
95        <div className="flex items-center gap-6 text-sm">
96          <PartName partNumber="OEM-9001" disabled />
97          <ProductLink sku="OEM-9001" disabled />
98        </div>
99      </div>
100      <div className="text-base-content/65 text-xs">
101        {opened != null ? (
102          <>
103            Preview open: <span className="font-mono">{opened}</span>
104          </>
105        ) : (
106          "Click a trigger to open its preview."
107        )}
108      </div>
109    </div>
110  );
111}
112