import { ROLES } from "../../constants/roles";

export default function UserRoleCard({ user, onRoleChange }) {
  console.log(user)

  return (
    <div className="card flex-between p-3 my-2 shadow-sm" style={{ transition: 'var(--transition-base)' }}>
      <div className="user-info">
        <strong>{user.name}</strong>
        <span className="user-username">@{user.username}</span>
      </div>
      <select
        onChange={(e) => onRoleChange(user.id, e.target.value)}
        value={user.role}
        className="form-select"
        style={{ fontSize: 'var(--font-size-sm)' }}
      >
        <option value={ROLES.VIEWER}>Viewer</option>
        <option value={ROLES.EDITOR}>Editor</option>
        <option value={ROLES.ADMIN}>Admin</option>
      </select>
    </div>
  );
}
