Direction

"use client";

import * as React from "react";
import { Button } from "@/components/ui/button";
import { DirectionProvider } from "@/components/ui/direction";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";

export function Demo() {
  const [dir, setDir] = React.useState<"ltr" | "rtl">("ltr");

  return (
    <div className="flex w-full max-w-md flex-col gap-fe-3">
      <div className="flex gap-fe-2">
        <Button
          type="button"
          variant={dir === "ltr" ? "default" : "outline"}
          onClick={() => setDir("ltr")}
        >
          LTR
        </Button>
        <Button
          type="button"
          variant={dir === "rtl" ? "default" : "outline"}
          onClick={() => setDir("rtl")}
        >
          RTL
        </Button>
      </div>
      <DirectionProvider direction={dir}>
        <div
          dir={dir}
          className="rounded-fe-card border border-border bg-card p-fe-4"
        >
          <Label htmlFor="dir-name">Nome</Label>
          <Input id="dir-name" className="mt-fe-2" defaultValue="Finance Equity" />
          <p className="fe-caption mt-fe-3 text-muted-foreground">
            Direção ativa: <span className="font-mono">{dir}</span>
          </p>
        </div>
      </DirectionProvider>
    </div>
  );
}