import { cn } from "cn"
import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import {
Sheet,
SheetClose,
SheetContent,
SheetDescription,
SheetFooter,
SheetHeader,
SheetTitle,
SheetTrigger,
} from "@/components/ui/sheet"
export default function Page({
className,
...props
}: React.ComponentProps<"div">) {
return (
<div
dir="rtl"
lang="fa"
className={cn(
"bg-muted text-foreground flex min-h-[420px] flex-col items-center justify-center gap-4 p-6",
className
)}
{...props}
>
<Sheet>
<SheetTrigger render={<Button />}>تغییر رمز عبور</SheetTrigger>
<SheetContent side="right" className="w-full sm:max-w-md" dir="rtl" lang="fa">
<SheetHeader>
<SheetTitle>تغییر رمز عبور</SheetTitle>
<SheetDescription>رمز جدید خود را تنظیم کنید</SheetDescription>
</SheetHeader>
<div className="grid flex-1 auto-rows-min gap-4 px-4">
<div className="grid gap-2">
<Label htmlFor="reset-password">رمز عبور جدید</Label>
<Input
id="reset-password"
type="password"
placeholder="••••••••"
dir="ltr"
className="text-start"
/>
</div>
<div className="grid gap-2">
<Label htmlFor="reset-confirm">تکرار رمز عبور</Label>
<Input
id="reset-confirm"
type="password"
placeholder="••••••••"
dir="ltr"
className="text-start"
/>
</div>
</div>
<SheetFooter>
<SheetClose render={<Button className="w-full" />}>
ذخیره رمز جدید
</SheetClose>
</SheetFooter>
</SheetContent>
</Sheet>
</div>
)
}