"use client";
import React, { useState } from "react";
import { Card, CardContent, Typography, Stack } from "@mui/material";
import { IUser } from "./interfaces";
import UserRoleCard from "@/app/features/UserRoles/UserRoleCard";
import UserTopBar from "@/app/features/UserRoles/AddUser/AddUser";
import EditUser from "@/app/features/UserRoles/EditUser/EditUser";
import Modal from "@/app/components/Modal/Modal";

interface UsersProps {
  users: IUser[];
}

const Users: React.FC<UsersProps> = ({ users }) => {
  const [showAddUser, setShowAddUser] = useState(false);

  return (
    <div>
      <UserTopBar onAddUser={() => setShowAddUser(true)} />
      {users.map((user: IUser) => (
        <Card key={user.id} sx={{ mb: 2 }}>
          <CardContent>
            <Typography variant="h6">{user.username}</Typography>
            <Typography variant="body2">
              Merchant ID: {user.merchantId}
            </Typography>

            {/* You can render more UI here for additional properties */}
            <Stack direction="row" spacing={1} mt={1}>
              <UserRoleCard
                username={user.lastName}
                name={user.name || ""}
                email={user.email}
                isAdmin={true}
                lastLogin="small"
                roles={user.authorities}
                merchants={[]} // merchants={Numberuser.allowedMerchantIds}
              />
              {/* Add more chips or UI elements for other data */}
            </Stack>
          </CardContent>
        </Card>
      ))}

      <Modal
        open={showAddUser}
        onClose={() => setShowAddUser(false)}
        title="Add User"
      >
        <EditUser />
      </Modal>
    </div>
  );
};
export default Users;