import type { MsgKey } from '../i18n/vi';
import { useI18n } from '../i18n/I18nProvider';

// The app's seven tabs. WB leads LIGHT — white balance is the first thing the
// eye corrects, and the web rail draws them in the order the panel opens. The
// rail is a single column on desktop and becomes the bottom bar under 860px
// (see styles/app.css).
export type TabId = 'presets' | 'favorited' | 'wb' | 'light' | 'fx' | 'frame' | 'create';

export const TABS: { id: TabId; label: MsgKey; glyph: string }[] = [
  { id: 'presets', label: 'tab.presets', glyph: '◉' },
  { id: 'favorited', label: 'tab.favorited', glyph: '★' },
  { id: 'wb', label: 'tab.wb', glyph: '◐' },
  { id: 'light', label: 'tab.light', glyph: '☀' },
  { id: 'fx', label: 'tab.fx', glyph: '✦' },
  { id: 'frame', label: 'tab.frame', glyph: '▣' },
  { id: 'create', label: 'tab.create', glyph: '✎' },
];

export function ToolRail({ tab, onTab }: { tab: TabId; onTab: (tab: TabId) => void }) {
  const { t } = useI18n();
  return (
    <nav className="rail" aria-label="tool tabs">
      {TABS.map((entry) => (
        <button
          key={entry.id}
          type="button"
          aria-pressed={tab === entry.id}
          onClick={() => onTab(entry.id)}
        >
          <span className="glyph" aria-hidden="true">{entry.glyph}</span>
          {t(entry.label)}
        </button>
      ))}
    </nav>
  );
}