// 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 }) {
  // 6 语言用原生下拉（段控横排会挤）。默认 en。
  const langs: [Lang, string][] = [
    ['en', 'English'], ['zh', '中文'], ['ja', '日本語'],
    ['ko', '한국어'], ['ru', 'Русский'], ['es', 'Español'],
  ];
  return (
    <select
      value={lang}
      onChange={(e) => setLang(e.target.value as Lang)}
      aria-label="Language"
      style={{
        border: '1px solid var(--border)',
        cursor: 'pointer',
        borderRadius: 999,
        padding: '5px 9px',
        fontFamily: 'var(--font-sans)',
        fontSize: 12.5,
        fontWeight: 700,
        background: 'var(--bg-subtle)',
        color: 'var(--fg2)',
      }}
    >
      {langs.map(([v, l]) => (
        <option key={v} value={v}>{l}</option>
      ))}
    </select>
  );
}
