"use client";

import { postLogout } from "@/actions/login";
import { Button } from "@/components/ui/button";
import {
  Card,
  CardHeader,
  CardDescription,
  CardContent,
  CardFooter,
  CardTitle,
} from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { useActionState } from "react";

export default function ({ user }: { user: { name: string; id: number } }) {
  const [state, formAction, isPending] = useActionState(postLogout, 0);
  return (
    <form action={formAction}>
      <Card>
        <CardHeader>
          <CardTitle>Profile</CardTitle>
          {state}
        </CardHeader>
        <CardContent>
          <p>Username: {user.name}</p>
          <p>User ID: {user.id}</p>
        </CardContent>
        <CardFooter>
          <Button type="submit">Log out</Button>
        </CardFooter>
      </Card>
    </form>
  );
}