"use client";
import { Button } from "@/components/ui/button";
import {
	Dialog,
	DialogContent,
	DialogDescription,
	DialogFooter,
	DialogHeader,
	DialogTitle,
	DialogTrigger,
} from "@/components/ui/dialog";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import type { IUserData } from "@/interfaces/userdata.interface";

import { Landmark, Unplug, User, Wallet } from "lucide-react";
import type React from "react";

export function AccountInfo({
	userData,
	setUserData,
}: {
	userData: IUserData;
	setUserData: React.Dispatch<React.SetStateAction<IUserData | undefined>>;
}) {
	return (
		<Dialog>
			<DialogTrigger asChild>
				<Button variant="outline" className={"gap-2 px-2"}>
					<p>{userData.firstName}</p>
					<User />
				</Button>
			</DialogTrigger>
			<DialogContent className="sm:max-w-[425px]">
				<DialogHeader>
					<DialogTitle>{`Your account - ${userData.firstName} ${userData.lastName}`}</DialogTitle>
					<DialogDescription>{userData.city}</DialogDescription>
				</DialogHeader>
				<div className={"flex flex-col items-center justify-center w-full"}>
					<div className={"flex flex-row justify-evenly items-center"}>
						<div className={"flex flex-row gap-1 justify-center items-center mx-auto"}>
							<Landmark />
							<p>{userData.dollarAvailables} $</p>
						</div>
						<div></div>
					</div>
				</div>
				<DialogFooter>
					<Button variant={"secondary"} className={"gap-2 px-2"}>
						<Wallet />
						<p>My wallet</p>
					</Button>
					<Button variant={"destructive"} className={"gap-2 px-2"}>
						<Unplug />
						<p>Disconnect</p>
					</Button>
				</DialogFooter>
			</DialogContent>
		</Dialog>
	);
}