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

interface UsersProps {
  users: IUser[];
}

const Users: React.FC<UsersProps> = ({ users }) => {
  return (
    <div>
      {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>
      ))}
    </div>
  );
};
export default Users;