// shared.tsx — 公共样式常量与原子（承袭 ucapp.jsx 的 ucCard / ucInput / UCLang）
import React from 'react';
import type { Lang } from '../lib/i18n';

export const card: React.CSSProperties = {
  background: 'var(--surface)',
  border: '1px solid var(--border)',
  borderRadius: 'var(--radius-xl)',
  boxShadow: 'var(--shadow-sm)',
};

export const input: React.CSSProperties = {
  border: '1.5px solid var(--border-strong)',
  borderRadius: 'var(--radius-md)',
  padding: '12px 14px',
  fontFamily: 'var(--font-sans)',
  fontSize: 14.5,
  color: 'var(--fg1)',
  background: 'var(--surface)',
  outline: 'none',
  width: '100%',
  boxSizing: 'border-box',
};

export function LangSeg({ lang, setLang }: { lang: Lang; setLang: (l: Lang) => void }) {
  return (
    <div style={{ display: 'flex', background: 'var(--bg-subtle)', borderRadius: 999, padding: 3, gap: 2 }}>
      {([['zh', '中文'], ['en', 'EN']] as [Lang, string][]).map(([v, l]) => (
        <button
          key={v}
          onClick={() => setLang(v)}
          aria-pressed={lang === v}
          style={{
            border: 'none',
            cursor: 'pointer',
            borderRadius: 999,
            padding: '5px 12px',
            fontFamily: 'var(--font-sans)',
            fontSize: 12.5,
            fontWeight: 700,
            background: lang === v ? 'var(--accent)' : 'transparent',
            color: lang === v ? 'var(--fg-on-accent)' : 'var(--fg3)',
          }}
        >
          {l}
        </button>
      ))}
    </div>
  );
}