RTL

// Self-contained RTL demo. The preview app's root ContextProvider runs with
// useRtl={false}; here we nest a second ContextProvider with useRtl + a
// dir="rtl" wrapper so only this subtree mirrors. That lets the docs page
// show LTR and RTL side by side in one iframe without any host changes.

import type { ReactNode } from "react"
import { ContextProvider } from "@arco-design/mobile-react"
import { Flex, Footnote1, TouchCell } from "@appboxo/ui-kit"

import { PreviewLayout, Section } from "./_section"

const ROWS_LTR: Array<[string, string]> = [
  ["Account", "Personal"],
  ["Currency", "USD"],
  ["Language", "English"],
]

const ROWS_RTL: Array<[string, string]> = [
  ["الحساب", "شخصي"],
  ["العملة", "درهم"],
  ["اللغة", "العربية"],
]

function CellCard({ rows }: { rows: Array<[string, string]> }) {
  return (
    <Flex
      vertical
      gap={2}
      style={{ background: "var(--fill-white)", borderRadius: 12 }}
    >
      {rows.map(([key, val]) => (
        <TouchCell
          key={key}
          className="rtl-tc"
          activeClass="cell-active"
          onClick={() => {}}
          label={key}
        >
          <Footnote1 color="text-3">{val}</Footnote1>
        </TouchCell>
      ))}
      <style>{`
        .rtl-tc .arco-cell-inner { min-height: 24px; padding: 12px 16px; }
        /* Push the value to the trailing edge; flex-end follows the active
           writing direction, so it lands right in LTR and left in RTL. */
        .rtl-tc .cell-content.has-label { justify-content: flex-end; }
        .cell-active { background: var(--fill-2); }
      `}</style>
    </Flex>
  )
}

function Dir({ rtl, children }: { rtl: boolean; children: ReactNode }) {
  return (
    <div dir={rtl ? "rtl" : "ltr"}>
      <ContextProvider system="ios" useRtl={rtl} useDarkMode={false}>
        {children}
      </ContextProvider>
    </div>
  )
}

export function RtlDemoPreview() {
  return (
    <PreviewLayout>
      <Section
        title="LTR · useRtl=false"
        description="Label leads, value + chevron trail on the right."
      >
        <Dir rtl={false}>
          <CellCard rows={ROWS_LTR} />
        </Dir>
      </Section>

      <Section
        title="RTL · useRtl=true"
        description="Everything mirrors: label trails right, chevron flips to the left."
      >
        <Dir rtl>
          <CellCard rows={ROWS_RTL} />
        </Dir>
      </Section>
    </PreviewLayout>
  )
}