import AuthenticatedLayout from "@/layouts/authenticated-layout";
import { Head, Link, useForm } from "@inertiajs/react";
import { Card, CardHeader, CardTitle, CardDescription, CardContent } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { Button } from "@/components/ui/button";

type User = {
  id: number;
  name: string;
  email: string;
  role: string;
  password?: string; // Optional unless you always receive it
};

type Props = {
  user: User;
};

export default function Show({ user }: Props) {


  return (
    <AuthenticatedLayout header="Show User">
      <Head title="Show User" />

      <div className="container mx-auto px-4 py-6 max-w-4xl">
        <div className="flex justify-between items-center mb-6">
          <h1 className="text-2xl font-bold">Show User</h1>
          <Link
            href={route("users.index")}
            className="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-md transition duration-200"
          >
            Back to Users
          </Link>
        </div>
        <div>
            <p><strong>Name: {user.name}</strong></p>
             <p><strong>Email: {user.email}</strong></p>
        </div>

      </div>
    </AuthenticatedLayout>
  );
}
