"use client"
 
import { useTextDirection } from "@/hooks/use-text-direction"
 
export function Component() {
  const direction = useTextDirection({ initialDirection: "auto" })
 
  return (
    <div
      style={{
        padding: "24px",
        maxWidth: 500,
        margin: "0 auto",
        border: "1px solid #eee",
        borderRadius: 8,
        direction,
      }}
    >
      <h2>
        Current Direction: <code>{direction}</code>
      </h2>
      <p>
        This container's <b>CSS direction</b> is set to <code>{direction}</code>
        . Try changing your browser or document direction to see it update.
      </p>
      <input
        type="text"
        placeholder="Type here..."
        style={{ width: "100%", marginTop: 16, direction }}
      />
    </div>
  )
}