Direction

"use client"

export {
  DirectionProvider,
  useDirection,
} from "@base-ui/react/direction-provider"

import { Button } from "@/components/ui/button"
import {
  Card,
  CardAction,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardTitle,
} from "@/components/ui/card"
import { DirectionProvider } from "@/components/ui/direction"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

// The copy, in Arabic (shadcn's own RTL card translation).
const COPY = {
  title: "تسجيل الدخول إلى حسابك",
  description: "أدخل بريدك الإلكتروني أدناه لتسجيل الدخول إلى حسابك",
  signUp: "إنشاء حساب",
  email: "البريد الإلكتروني",
  emailPlaceholder: "m@example.com",
  password: "كلمة المرور",
  forgotPassword: "نسيت كلمة المرور؟",
  login: "تسجيل الدخول",
} as const

// A sign-in card laid out right to left: DirectionProvider tells Base UI
// parts the reading direction, and dir="rtl" flips the layout itself.
export default function DirectionDemo() {
  return (
    <DirectionProvider direction="rtl">
      <Card dir="rtl" className="w-full max-w-sm">
        <CardHeader>
          <CardTitle>{COPY.title}</CardTitle>
          <CardDescription>{COPY.description}</CardDescription>
          <CardAction>
            <Button variant="link">{COPY.signUp}</Button>
          </CardAction>
        </CardHeader>
        <CardContent>
          <form className="flex flex-col gap-6">
            <div className="grid gap-2">
              <Label htmlFor="direction-email">{COPY.email}</Label>
              <Input
                id="direction-email"
                type="email"
                placeholder={COPY.emailPlaceholder}
                dir="ltr"
                className="text-end"
              />
            </div>
            <div className="grid gap-2">
              <div className="flex items-center">
                <Label htmlFor="direction-password">{COPY.password}</Label>
                <a
                  href="#"
                  className="ms-auto text-sm underline-offset-4 hover:underline"
                >
                  {COPY.forgotPassword}
                </a>
              </div>
              <Input id="direction-password" type="password" />
            </div>
          </form>
        </CardContent>
        <CardFooter>
          <Button type="submit" className="w-full">
            {COPY.login}
          </Button>
        </CardFooter>
      </Card>
    </DirectionProvider>
  )
}