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

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>

            <Stack direction="row" spacing={1} mt={1}>
              <UserRoleCard
                user={user}
                isAdmin={true}
                lastLogin="small"
                merchants={[]} // merchants={Numberuser.allowedMerchantIds}
              />
            </Stack>
          </CardContent>
        </Card>
      ))}

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